如何在两个输入框内容相同时隐藏表单提交按钮

要实现当两个输入框内容相同时隐藏提交按钮，你需要实时监听输入框的内容变化，根据内容对比结果控制按钮的显示状态，具体修改步骤如下：

1. 给提交按钮添加唯一ID，方便JS选中元素
2. 编写判断逻辑，对比两个输入框的内容（去除首尾空格），内容相同时隐藏按钮，否则显示
3. 给两个输入框绑定input事件，实时触发判断逻辑
4. 页面初始化时执行一次判断，确保初始状态正确

修改后的完整代码如下：

<form id="my-form" action="" method="post">
  <input type="text" id="inp-1" value="">
  <input type="text" id="inp-2" value="">
  <button type="submit" id="submit-btn">Signup project</button>
</form>

<script>
// 一次性选中需要用到的元素
const myForm = document.getElementById('my-form'),
      inp1 = document.getElementById('inp-1'),
      inp2 = document.getElementById('inp-2'),
      submitBtn = document.getElementById('submit-btn');

// 定义判断函数，控制按钮显示/隐藏
function checkInputValues() {
  const val1 = inp1.value.trim();
  const val2 = inp2.value.trim();
  // 内容相同时隐藏按钮，否则显示
  submitBtn.style.display = val1 === val2 ? 'none' : 'block';
}

// 给两个输入框绑定输入事件，实时触发判断
inp1.addEventListener('input', checkInputValues);
inp2.addEventListener('input', checkInputValues);

// 页面加载时执行一次，确保初始状态正确
checkInputValues();

// 可选：保留原提交拦截逻辑，防止意外提交（比如按钮被强制显示时）
myForm.addEventListener('submit', e => {
  if (inp1.value.trim() === inp2.value.trim()) {
    e.preventDefault();
  }
});
</script>

说明 #

• 使用input事件可以监听输入框的所有内容变化（包括键盘输入、粘贴、拖拽等），确保状态同步
• 通过修改style.display属性控制按钮显示，none为隐藏，block为默认块级显示（如果按钮是行内元素，也可以用inline-block）
• 保留原提交拦截逻辑作为兜底，避免按钮被通过其他方式强制显示时出现不符合预期的提交

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