JS在输入值自动生成场景下实现满足条件时禁用/启用按钮

问题根因 #

你当前使用的change事件仅会在用户主动操作输入框、且输入框失去焦点时触发，通过JS脚本自动修改输入框的value属性不会触发该事件，因此状态判断逻辑不会自动执行。

解决方案 #

方案1：可控制自动填充逻辑（推荐）

如果能修改500ms后给输入框赋值的代码，仅需要在赋值完成后主动调用一次状态判断函数即可，同时建议将change事件替换为input事件，实现用户手动输入时实时响应按钮状态：

<input class="input" type="text">
<button class="button">Click Me</button>

<script>
const input = document.querySelector(".input");
const button = document.querySelector(".button");
button.disabled = true;

// 替换为input事件，用户输入时实时生效
input.addEventListener("input", stateHandle);
function stateHandle() {
    button.disabled = input.value === "";
}

// 以下为你原有500ms自动赋值的逻辑示例
setTimeout(() => {
  input.value = "自动生成的内容";
  // 赋值完成后主动触发状态判断
  stateHandle();
}, 500)
</script>

方案2：无法控制自动填充逻辑

如果没有修改自动赋值逻辑的权限，可以通过短间隔轮询检查输入框的值，轮询间隔和最大检查时长可根据需求调整：

<input class="input" type="text">
<button class="button">Click Me</button>

<script>
const input = document.querySelector(".input");
const button = document.querySelector(".button");
button.disabled = true;

input.addEventListener("input", stateHandle);
function stateHandle() {
    button.disabled = input.value === "";
}

// 每100ms检查一次输入框值，最多检查10秒避免资源占用
let checkCount = 0;
const checkTimer = setInterval(() => {
  stateHandle();
  checkCount++;
  if (input.value !== "" || checkCount > 100) {
    clearInterval(checkTimer);
  }
}, 100)
</script>

内容的提问来源于stack exchange，提问作者iyar