jquery - 阻止用户使用 Enter 提交表单，但在一个表单输入字段上启用 Enter 键

Question

所以我有一个带有 jQ​​uery 的表单，可以阻止用户使用 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 键？ Enter 键只能在该表单输入字段上起作用。

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

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

这是输入字段:

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

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

Answer 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">

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

例如 event.target.matches("#allowedInput") 这会将输入与选择器匹配，您也可以添加您的姓名或类名。