如何不使用type="submit"，通过type="button"实现按Enter键提交表单

完全可以基于现有的type="button"按钮实现需求，不需要修改按钮类型，下面提供两种常用的可行方案：

方案1：全局监听键盘事件（推荐） #

通过监听键盘事件判断是否按下Enter键，仅当焦点在登录相关输入框内时才触发提交逻辑，适用场景更广：

document.addEventListener('keyup', function(e) {
  // 判断按下的是Enter键
  if (e.key === 'Enter') {
    const activeEl = document.activeElement;
    // 仅当焦点在账号/密码输入框时触发提交
    if (activeEl.id === 'login-user' || activeEl.id === 'login-password') {
      loginsubmit();
      // 若输入框被<form>标签包裹，请取消下方注释，阻止表单默认提交跳转行为
      // e.preventDefault();
    }
  }
})

方案2：给输入框单独绑定Enter触发事件 #

直接在输入框标签上添加键盘事件回调，代码更直观，适合小范围场景使用，修改后的输入框代码如下：

<input type="text" id = "login-user" class="form-control log-input" placeholder="Username" required="required" onkeyup="event.key==='Enter'&&loginsubmit()">
<input type="password" id="login-password" class="form-control log-input" placeholder="Password" required="required" onkeyup="event.key==='Enter'&&loginsubmit()">                   
<input type="button" id = "login-submit" class="btn btn-primary log-submit" value="Login" onclick = loginsubmit()>

注意事项 #

• 如果输入框外层包裹了<form>标签，默认按Enter会触发表单默认提交跳转，需要在事件回调中添加e.preventDefault()，或者给form标签添加onsubmit="return false"禁用默认提交逻辑。
• keyCode属性已被Web标准废弃，优先使用e.key === 'Enter'做判断，兼容性覆盖所有主流浏览器。

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