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

Question

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

代码如下：

$(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，现在如何允许在一个输入字段中使用回车键？回车键应该只在那个表单输入字段上有效。

这也可以使用输入字段 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">

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

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

Answer 2

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

你可以添加class .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..

为了方便起见，请查看此 fiddle：http://jsfiddle.net/syamsoul/vu1b7gfs/

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

或者，您可以反向操作..禁用所有输入的输入...但使用 class .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..

为了方便起见，请查看此 fiddle：http://jsfiddle.net/syamsoul/h567mtnq/

Answer 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;
    }

});

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

Prevent users submitting a form using Enter but enable enter key on one form input field

html

forms

jquery

form-submit