Javascript/jQuery：同时检测返回键按下和提交按钮按下答案

【问题标题】：Javascript/jQuery : Detect both return key press and submit button press simultaneouslyJavascript/jQuery：同时检测返回键按下和提交按钮按下
【发布时间】：2015-01-20 13:39:42
【问题描述】：

我有一个输入字段和它下面的“添加”按钮。添加按钮的基本作用是，它将一个新的输入字段附加到文档中。我在这里要做的是，在输入字段中键入时，如果检测到返回键按下，调用添加新输入字段的函数会触发与单击添加按钮时触发的相同函数。

我可以以某种方式将返回键按下的检测合并到以下内容中吗？

$('.addNewSite').on('click', function(){


          var idNewInput = "site" + numInputFields;
          $('.inputFieldsSettingsPanel').append('<input type="text" class="tracksiteInput" id = "' + idNewInput + '"></input>');
          $("#" + idNewInput).focus();

});

【问题讨论】：

按键应该被输入字段检测到。你不觉得吗？
那么为什么不发布附加输入字段的代码，如果这是您想要添加事件处理程序的元素。与问题无关的空函数没有多大帮助
我读了几遍，不太明白。您能否在一个简洁的示例中分享更多您的代码？
你的意思是这两个事件做同样的事情吗？只需创建单独添加新字段并将2个事件绑定到它的函数，如function addField(){}; $('.addButton').on('click', addField); $('input').on('keypress', addField);
Detect Enter key is pressed with jquery 的可能重复项

标签： javascript jquery html time

【解决方案1】：

我想你想要这个http://jsfiddle.net/naeemshaikh27/cy84t4pz/

function fun(){
$('body').append('<input type="text"/>');
}

$('.addButton').on('click', fun);

$('body').on('keypress','input', function(e){
if (e.keyCode == 13) {
       fun();
    }    
});

【讨论】：

【解决方案2】：

像这样？ keypress() 中的 e.which 是您要查看的内容，以查看按下的按钮。在这种情况下，13 相当于回车键

$(document).ready(function() {
    $('.add').on('click', function() {
        var html = '<input type="text" class="field" /><br/><br/>';
        $('.form').append(html);
    });
    $(document).on("keypress", ".field", function(e) {
        if(e.which == 13) {
            $('.add').trigger('click');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a class="add" href="#">add</a><br/><br/>
<div class="form">
    <input type="text" class="field" /><br/><br/>
    <input type="text" class="field" /><br/><br/>
</div>

【讨论】：

这不会将事件按键绑定到动态添加的输入元素，请参阅我的答案..

【解决方案3】：

您无法检测输入上的输入键并触发按钮的点击事件。

$("button").on("click", function(e){
  $("body").append($("<input>").attr("type", "text"));
});

$(document).on("keypress", "input", function(e){
  if(e.which == 13) $("button").trigger("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Input</button>

【讨论】：

【解决方案4】：

var i;
var inputs=document.getElementsByClassName('add');

for(i=0;i<inputs.length;i++){
  inputs[i].addEventListener('keyup',function(event){
    
    if(event.keyCode){if (event.keyCode=="13" ){createNewElem();
      }}
            
      //if(event.which){if(event.which =="13"){alert('return pressed');}}
    
    });
  }
function createNewElem(){
   
  var newinput=document.createElement('input');
  var inptype=document.createAttribute('type');
  inptype.value="text"; 
  newinput.setAttributeNode(inptype);
  var inpclass=document.createAttribute('class');
  inpclass.value="add"; 
  newinput.setAttributeNode(inpclass);
  document.body.appendChild(newinput);
  
   
  }

&lt;input type="text" class="add" /&gt;

【讨论】：