Question

我有一个输入标签

<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的回答对我有帮助。感谢你们。顺便说一下如果你看到我以某种方式篡改代码，PLS让我知道。： - ）

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

Answer 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 for demo： demo

检测是否通过Enter选择输入值按下而不是点击

1 个答案: