我需要在用户从输入元素中选择数据和年份后运行一些代码我的HTML页面
这是我的JavaScript代码
var key_form = document.getElementById("key-form");
key_form.addEventListener("input", function () {
setTimeout(function(){let key = key_form.value; alert(key);}, 4000)
})
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Starter Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="src/script.js" defer></script>
<link rel="stylesheet" href="src/styles.css"/>
</head>
<body>
<label for="key-form">Pick date for key: </label>
<input type="date" id="key-form"/>
<label for="word">Word to encrypt: </label>
<input type="text" id="word"/>
</body>
</html>
有更好的方法吗?
编辑:
我不希望它有一个硬的4秒限制，然后运行它所做的代码。我希望它只在用户完成输入时运行函数。
p。如果问题不清楚，请原谅
所以，问题是:当用户完成输入时，您如何知道"?
也许你的表单有一个提交按钮，用户必须点击?
const key_form = document.getElementById("key-form");
const submit_button = document.getElementById("submit-button");
submit_button.addEventListener("click", function () {
let key = key_form.value;
alert(key);
})<label for="key-form">Pick date for key: </label>
<input type="date" id="key-form"/>
<label for="word">Word to encrypt: </label>
<input type="text" id="word"/>
<button id="submit-button">Encrypt word!</button>或者当焦点不再放在日期字段上时?
(blur事件触发当你点击字段外或按tab时字段有焦点)
const key_form = document.getElementById("key-form");
key_form.addEventListener("blur", function () {
let key = key_form.value;
alert(key);
})<label for="key-form">Pick date for key: </label>
<input type="date" id="key-form"/>
<label for="word">Word to encrypt: </label>
<input type="text" id="word"/>还有其他方法。在填写表单字段时触发许多事件，它们都可以触发您想要的任何逻辑。因此，考虑您希望用户如何与此表单交互，然后找到合适的事件来支持它。