如何用jQuery或原生JS实现输入框实时控制按钮启用/禁用

核心思路 #

使用input事件替代change事件，它能在输入框内容发生任何实时变更（包括键盘输入、粘贴、剪切、拖拽文本等）时立即触发，完全满足实时响应的需求。

原生JavaScript实现 #

<input type="text" id="inputField">
<button id="submitBtn" disabled>提交</button>

<script>
const input = document.getElementById('inputField');
const submitBtn = document.getElementById('submitBtn');

// 实时监听输入框内容变化
input.addEventListener('input', function() {
  // 若输入框内容为空（或纯空格）则禁用按钮，否则启用
  submitBtn.disabled = this.value.trim() === '';
});

// 页面加载时初始化按钮状态（处理输入框默认有值的场景）
submitBtn.disabled = input.value.trim() === '';
</script>

jQuery实现 #

<input type="text" id="inputField">
<button id="submitBtn" disabled>提交</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  const $input = $('#inputField');
  const $submitBtn = $('#submitBtn');

  // 绑定input事件实现实时监听
  $input.on('input', function() {
    $submitBtn.prop('disabled', $(this).val().trim() === '');
  });

  // 初始化按钮状态
  $submitBtn.prop('disabled', $input.val().trim() === '');
});
</script>

补充说明 #

• 如果需要兼容IE8及以下这类老旧浏览器，input事件可能不支持，这时可以同时绑定keyup、paste、cut事件作为降级方案，但目前主流浏览器均已支持input事件，优先使用它即可。
• 代码中的trim()用于排除输入框仅含空格的情况，如果不需要这个逻辑，直接去掉trim()即可。

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