Question

所以我有一个带有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">

我尝试了几次尝试并用谷歌搜索了一个答案，但是我无法使它正常工作。

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")，这将使输入与选择器匹配，您也可以添加名称或类名。

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

Answer 3

要了解有关“非jquery”的更多信息-> JsonSerializerSettings.Converters

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

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

});

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

3 个答案: