按下回车键进行 1 次输入时防止提交表单答案

【问题标题】：Prevent submitting of form when pressing enter for 1 input按下回车键进行 1 次输入时防止提交表单
【发布时间】：2018-11-18 17:50:24
【问题描述】：

我已经看到this answer，但是我想在仅输入 1 个输入时禁用提交表单。

<form>
  <input type="text" name="enterNotDisabled">
  <input type="text" name="enterDisabled">
  <button type="submit">
</form>

例如，我希望当焦点在第一个输入时，您可以通过按 enter 提交表单，但是对于第二个输入，此功能将被禁用。

感谢您的帮助。

【问题讨论】：

不要将 eventListener 添加到窗口（如链接中所做的那样），而是将其添加到您不想触发表单提交的特定输入中。

标签： javascript html forms html-input

【解决方案1】：

只需在该字段上捕获“Enter”键事件。

简单示例：

<form>
  <input type="text" name="enterNotDisabled">
  <input type="text" name="enterDisabled" id="input2">
  <button type="submit">
</form>

function catchSubmit(evt) {
  if (evt.code === 'Enter') {
        evt.preventDefault();  
  }
}
document.getElementById('input2').addEventListener('keypress', catchSubmit, false);

【讨论】：

【解决方案2】：

Javascript

<form id="form">
  <input type="text" name="enterNotDisabled">
  <input type="text" name="enterDisabled">
  <button type="submit">
</form>

<script type="text/javascript">
    document.querySelector("#form").addEventListener("submit", function(e){
        console.log('event')
        e.preventDefault();
    });

</script>

jQuery

<form id="form">
  <input type="text" name="enterNotDisabled">
  <input type="text" name="enterDisabled">
  <button type="submit">
</form>

<script type="text/javascript">
    $('#form').submit(function(ev) {
        console.log('event')
        ev.preventDefault();
    });

</script>

【讨论】：