在JS中,如果输入条件满足,禁用或启用按钮,而输入是自动生成的



我是JS新手。与标题中一样,我想在满足条件时创建一个禁用按钮,基于以下代码:

<input class="input" type="text">
<button class="button">Click Me</button>
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true;
input.addEventListener("change", stateHandle);
function stateHandle() {
if(document.querySelector(".input").value === "") {
button.disabled = true;
} else {
button.disabled = false;
}
}
</script>

输入的值在500ms后自动生成。上面的代码工作,如果在输入值出现后,然后我输入任何数字。我想要的是当输入值出现时,按钮将自动处于启用位置。

根据@David的回答,我添加了新的Events并稍后分发它们。这是更新后的代码:

<script >
let input = document.querySelector("#input");
let button = document.querySelector("#button");
button.disabled = true; //setting button state to disabled

const event = new Event("change"); //adding new event
input.addEventListener("change", stateHandle);
function stateHandle() {
var t = document.getElementById("jarak").value,
check = "luar";
if (new RegExp('\b' + check + '\b').test(t)) {
button.disabled = true; //button remains disabled
} else {
button.disabled = false; //button is enabled
}
}
setTimeout(function() {
input.dispatchEvent(event); //dispatching event after 700ms
}, 700);
</script>

最新更新