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

Question

I have an input field and an "add" button below it. What the add button basically does is, it appends a new input field to the document. What I am trying to do here is, while typing in an input field if return key press is detected the function that calls the addition of new input field is fired the same function that is fired when the add button is clicked.

Can I incorporate the detection of return key press in the following somehow?

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


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

});

Answer 1

I think you want this 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();
    }    
});

Answer 2

something like this? e.which in the keypress() is what you're looking for to see what button is pressed. in this case, 13 is equivalent to the enter key

 $(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> 

Answer 3

You cant detect enter keypress on the input and trigger the button's click event.

 $("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> 

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

 <input type="text" class="add" />