检测是否通过 Enter 选择了输入值按不是 onclick答案

【问题标题】：detect if input value selected via Enter press not onclick检测是否通过 Enter 选择了输入值按不是 onclick
【发布时间】：2017-03-29 18:44:34
【问题描述】：

我有一个输入标签

<input type="text" name="cOperator"  class="form-control scale-input operator"  placeholder="Enter your ID" autocomplete="off"  onkeyup="ajax_showOptions(this,'getEmp',event)" required>

所以当我开始输入时，它会显示员工列表。而且我有一个处理点击事件的 jQuery 函数。

$( document ).on( "click",".optionDivSelected, .optionDiv",  function() {
     if($('.operator').val().length > 0){
        $('.operator-li').next().addClass('active');
        $( '.operator-li' ).find('span').addClass('hidden');
        $('.operator-value').show();
        $('.operator-value h1 span').html($('.operator').val());
        $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn();
     }
});

函数检查输入的值，隐藏输入，在 div 中显示选定的值并自动进入下一步（我没有下一步按钮）。这部分工作完美。问题是：用户只能使用选项卡导航，使用向下或向上箭头进行选择，然后使用 Enter 按键进行选择。我在输入中有一个选定的值，但它不会让我进入下一步，因为 Click 事件没有被触发。我尝试执行以下操作：

$( document ).on( "click, keypress",".optionDivSelected, .optionDiv",  function() {console.log('someone used keyboard')});

但没有运气。（我不知道是否可以有多个事件处理程序）

如何检测用户是否使用 Enter 按键插入值并在之后执行我的工作人员。当我验证输入 onchange 时，它也会给我带来一个问题。输入要键入，而不仅仅是通过单击或输入按键插入。

请帮我解决这个问题。

我无法显示整个代码。因为它有很多后端人员混合。我将包括我正在尝试实现的步骤。

我开始输入并看到一个列表：

我点击其中一个选项，然后进入下一步：

但是当我通过按 ENTER（或返回）进行选择时，我只看到带有选定选项的输入标签，没有带有选定运算符的 div，没有下一步。如下所示：

更新：

以下是我的解决方法，不是问题：结合 Aswin Ramesh 的评论、alpeshandya 和 Vikash Mishra 的回答，我想出了这段代码，它达到了我的预期。大多数alpeshandya的回答帮助了我。谢谢你们。顺便说一句，如果您发现我以某种方式将代码弄乱了，请告诉我。:-)

     var ajaxHandler = function(){
    // $( document ).on( "click",".optionDivSelected, .optionDiv",  function() {
         if($('.operator').val().length > 0){
            $('.operator-li').next().addClass('active');
            $( '.operator-li' ).find('span').addClass('hidden');
            $('.operator-value').show();
            $('.operator-value h1 span').html($('.operator').val());
            $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn();
         }
    // });
    console.log('ajaxhandler')
 };

 $( document ).on( "click",".optionDivSelected, .optionDiv",  ajaxHandler)
 $('.operator').on('keyup', function(event) {
    if(event.which == 13) {
          console.log("enter");
          event.preventDefault();
          ajaxHandler();
      }
});

【问题讨论】：

你可以试试$( document ).on( "click keyup",".optionDivSelected, .optionDiv", function(e) {if (e.keyCode == 13) { console.log('someone used keyboard');}});
没用 :-(

标签： javascript jquery html

【解决方案1】：

您将需要创建一个通用事件处理函数，该函数可用作单击和按键处理程序。这应该适用于您的用例：

var eventHandler=function(){
	if($('.operator').val().length > 0){
        $('.operator-li').next().addClass('active');
        $( '.operator-li' ).find('span').addClass('hidden');
        $('.operator-value').show();
        $('.operator-value h1 span').html($('.operator').val());
        $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn();
     }	 
}

$( document ).on( "click",".optionDivSelected, .optionDiv",  eventHandler)
$( document ).on( "keypress",".optionDivSelected, .optionDiv",  function(event){
	if(event.which == 13) {
          eventHandler();
      }
})

这是用于演示的 plunker： demo

【讨论】：