如何实现密码输入后自动提交表单？无按钮提交技术咨询

当然可以实现这个需求！我们可以通过监听输入框的内容变化事件，在用户完成输入后自动触发校验逻辑，无需点击提交按钮，同时允许用户持续修改输入直到验证通过。

实现思路 #

• 移除原有的提交按钮（也可以保留但隐藏，根据你的界面需求调整）
• 为两个密码输入框添加input事件监听，每次内容变化时自动执行校验
• 优化校验逻辑：仅当两个输入框都有值时才启动校验，避免空值时频繁触发提示
• 加入输入自动聚焦的细节，提升用户输入流畅度

修改后的完整代码 #

<fieldset> 
  <form class="hero-form" action="#"> 
    <div class="row-fluid"> 
      <label>Enter your passcode</label> 
      <input type="password" name="password" maxlength="1" class="span7" id="password" required/> 
      <input type="password" name="password" maxlength="1" class="span7" id="password2" required/> 
    </div> 
  </form> 
</fieldset>

<script>
// 获取两个密码输入框元素
const passwordInput = document.getElementById('password');
const password2Input = document.getElementById('password2');

// 核心密码校验函数
function checkPasswords() {
  const pwd1 = passwordInput.value;
  const pwd2 = password2Input.value;

  // 只有两个输入框都填入内容时才校验
  if (pwd1 && pwd2) {
    if (pwd1 === '1' && pwd2 === '1') {
      // 验证通过，跳转目标页面
      window.location.href = 'http://google.co.in';
    } else {
      // 验证失败，提示用户并重置输入状态
      alert('Please check your passcode and try again');
      // 清空输入框并聚焦到第一个输入框，方便用户重新尝试
      passwordInput.value = '';
      password2Input.value = '';
      passwordInput.focus();
    }
  }
}

// 为第一个输入框添加事件监听：输入完字符自动跳转到第二个框，同时触发校验
passwordInput.addEventListener('input', function() {
  if (this.value.length === 1) {
    password2Input.focus();
  }
  checkPasswords();
});

// 第二个输入框内容变化时直接触发校验
password2Input.addEventListener('input', checkPasswords);

// 页面加载完成后自动聚焦到第一个输入框，减少用户操作步骤
window.addEventListener('load', () => {
  passwordInput.focus();
});
</script>

功能细节说明 #

1. 自动触发校验：用户在两个输入框各输入一个字符后，会立即执行密码验证
2. 流畅输入体验：输入完第一个密码框后会自动聚焦到第二个框，无需手动切换光标
3. 持续尝试支持：校验失败后会自动清空输入框并聚焦到第一个框，用户可以马上重新输入尝试
4. 初始状态优化：页面加载完成后自动聚焦到第一个输入框，让用户可以直接开始输入

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