如何用原生JavaScript实现双输入非空才启用表单提交按钮？

没问题，我帮你把这类需求的jQuery方案转换成原生JavaScript版本，完全支持**输入框内容的任何变更（包括粘贴、键盘输入、剪切等）**自动校验，确保提交按钮只有在两个输入框都不为空时才启用。

完整代码示例 #

HTML结构

<form id="contactForm">
  <input type="text" id="nameInput" placeholder="请输入姓名">
  <input type="email" id="emailInput" placeholder="请输入邮箱">
  <button type="submit" id="submitBtn" disabled>提交</button>
</form>

原生JavaScript代码

// 获取DOM元素
const nameInput = document.getElementById('nameInput');
const emailInput = document.getElementById('emailInput');
const submitBtn = document.getElementById('submitBtn');

// 定义校验函数：检查两个输入框是否都不为空
function checkInputs() {
  // 用trim()排除纯空格的情况，确保输入有效内容
  const isNameFilled = nameInput.value.trim() !== '';
  const isEmailFilled = emailInput.value.trim() !== '';
  // 更新按钮的禁用状态：只有两个输入框都有内容时才启用
  submitBtn.disabled = !(isNameFilled && isEmailFilled);
}

// 给两个输入框绑定input事件（覆盖所有内容变更场景）
nameInput.addEventListener('input', checkInputs);
emailInput.addEventListener('input', checkInputs);

// 页面加载时初始化一次，确保按钮默认处于禁用状态
checkInputs();

关键细节说明 #

• 为什么用input事件？
  这个事件会在输入框内容发生任何变化时触发——包括键盘输入、鼠标粘贴（右键/快捷键）、剪切内容等，比keyup或change事件覆盖的场景更全面，完美匹配你的需求。
• trim()的作用
  避免用户只输入空格就触发按钮启用的情况，确保输入框确实有有效内容。
• 初始化调用checkInputs()
  页面加载完成后立刻执行一次校验，保证按钮一开始处于禁用状态，即使输入框默认是空的。

对比jQuery方案的对应逻辑 #

如果你的jQuery方案是类似这样的：

$('#nameInput, #emailInput').on('input', function() {
  const isFilled = $('#nameInput').val().trim() !== '' && $('#emailInput').val().trim() !== '';
  $('#submitBtn').prop('disabled', !isFilled);
});
// 初始化
$(document).ready(function() {
  $('#submitBtn').prop('disabled', true);
});

上面的原生JS代码就是完全等价的实现，没有依赖任何库，纯原生语法。

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