Question

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

我可以在某种程度上加入返回按键的检测吗？

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


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

});

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

Answer 2

这样的事情？ e.which中的keypress()是您正在寻找的按钮，用于查看按下的按钮。在这种情况下，13等同于回车键

＆＃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');
        }
    });
});

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

$("button").on("click", function(e){
  $("body").append($("<input>").attr("type", "text"));
});

$(document).on("keypress", "input", function(e){
  if(e.which == 13) $("button").trigger("click");
});

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: