防止用户使用 Enter 提交表单，但在一个表单输入字段上启用 Enter 键答案

【问题标题】：Prevent users submitting a form using Enter but enable enter key on one form input field防止用户使用 Enter 提交表单，但在一个表单输入字段上启用 Enter 键
【发布时间】：2018-12-17 06:02:17
【问题描述】：

所以我有一个带有 jQuery 的表单，它阻止用户使用 enter 键提交表单。

代码如下：

$(document).ready(function() {
    // code prevents user submitting form using the enter button - must use submit button.
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });
    .....
});

如果我有 id，现在如何允许在一个输入字段中使用 enter 键？回车键应该只适用于那个表单输入字段。

这也可以使用输入字段 css 而不是 id 来完成吗？

这也可以使用输入字段名称来完成吗？

这是输入字段：

<input id="id_tags__tagautosuggest" name="tags" type="text" class="kmw-disabled keymanweb-font">

我已经尝试了几次尝试并在谷歌上搜索了一个答案，但我无法让它发挥作用。

【问题讨论】：

标签： jquery html forms form-submit

【解决方案1】：

您可以使用event.target.id 来阻止和允许特定输入。

 $(window).keydown(function(event){      
        if(event.keyCode == 13) {
          if(event.target.id==="allowedInput"){
            alert('submit form')
          }else{
            alert('not submitting')
            event.preventDefault();
            return false;
          }

        }
    });

演示：

$(window).keydown(function(event) {

  if (event.keyCode == 13) {
    if (event.target.id === "allowedInput") {
      alert('submit form')
    } else {
      alert('not submitting')
      event.preventDefault();
      return false;
    }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="allowedInput" name="allowedInput" type="text" class="kmw-disabled keymanweb-font">

<input id="notallowedInput" name="notallowedInput" type="text" class="kmw-disabled keymanweb-font">

根据某些性能建议，您也可以使用选择器来匹配输入

对于 ex event.target.matches("#allowedInput") 这将匹配输入与选择器，你也可以添加你的名字或类名。

【讨论】：

为了更灵活，请检查event.target.matches 是否为特定选择器。

【解决方案2】：

我分享更简单的解决方案...

您可以添加类.disable_enter 来输入您想要禁用submit-by-enter..

<form>
    <input type="text" name="field1" class="disable_enter" />
    <input type="text" name="field2" class="disable_enter" />
    <input type="text" name="field3" />
    <button type="submit">Submit</button>
</form>

$('form .disable_enter').on('keydown keypress keyup', function(e){
  if( e.keyCode == 13 ) {
    e.preventDefault();
    return false;
  }
});

只有field3 可以成为submit-by-enter..

为了您的方便，请查看这个小提琴：http://jsfiddle.net/syamsoul/vu1b7gfs/

|-------------|

或者，您可以执行反向操作.. 禁用所有输入的输入...但使用类 .enable-enter 来启用 submit-by-enter..

<form>
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="text" name="field3" class="enable_enter" />
    <button type="submit">Submit</button>
</form>

$('form *').not('.enable_enter').on('keydown keypress keyup', function(e){
  if( e.keyCode == 13 ) {
    e.preventDefault();
    return false;
  }
});

只有field3 可以成为submit-by-enter..

为了您的方便，请查看这个小提琴：http://jsfiddle.net/syamsoul/h567mtnq/

【讨论】：

【解决方案3】：

了解更多关于“not jquery”的信息 --> http://api.jquery.com/not/

 $('window').not('#id_tags__tagautosuggest').keydown(function(event){

   //Your code...
   if(event.keyCode == 13) {
        event.preventDefault();
        return false;
    }

});

【讨论】：