javascript “Keypress”事件无法正常工作,使用 jQuery 和 Select2

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30697111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 12:33:06  来源:igfitidea点击:

"Keypress" event is not working correctly, using jQuery & Select2

javascriptjqueryjquery-select2

提问by Vicky

I have a forum in which I change the functionality of tab to enter. When the user presses enter the next input field get focus and somehow iImanage to open the select2 select box on focusinevent so the select 2 box opens up.

我有一个论坛,我可以在其中更改选项卡的功能以进入。当用户按下进入下一个输入字段时,获得焦点并以某种方式 iImanage 在focusin事件上打开 select2 选择框,以便打开选择 2 框。

But, when I select the value and press enter in selec2 select box it does not close and remain open on enter key press event but it closes. When I change the enter key event to any keypress event than select2 get close and works fine but I have to do that by enter.

但是,当我选择该值并在 selec2 选择框中按 Enter 时,它不会关闭并在 Enter 按键事件时保持打开状态,但它会关闭。当我将输入键事件更改为任何按键事件时,select2 会关闭并且工作正常,但我必须通过输入来完成。

What I want:
When the user selects the value in select2 search-box and presses enter it get close and focus move to next input field or any field.

我想要什么:
当用户在 select2 搜索框中选择值并按 Enter 键时,它会关闭并将焦点移至下一个输入字段或任何字段。

What i have done so far.

到目前为止我所做的。

$('.search-select').on("focusin",function(event) {
    $('#s2id_form-field-select-3').select2('open');
    event.preventDefault();  
});

Select2 with enter key event which isn't working

Select2 输入键事件不起作用

$('.select2-input').on("keypress", function(e) {
            if (e.keyCode == 13) {
                $("#select2-drop-mask").click();
                $('#name').focus();
                e.preventDefault();   
                }
       });

Select2 with any keypress event which is working

Select2 与任何正在工作的按键事件

$('.select2-input').on("keypress", function(event) {
                $("#select2-drop-mask").click();
                $('#name').focus();
                event.preventDefault();         
});

Markup

标记

 <select id="form-field-select-3" name="register_id" class="form-control search-select" required="required">
   <option value="">&nbsp;</option>
   <? $query=$this->dba->get_dropdown('register',array('id','name'));
      foreach($query as $key=>$value):
   ?>
   <option value="<?=$key?>"><?=$value; ?></option>}
  <? endforeach;?>
</select>

Apologies in advance for mistakes, this is my first time using Select2.

有错误请见谅,这是我第一次使用Select2。

采纳答案by Sze-Hung Daniel Tsui

I think you're looking for keydown:

我认为您正在寻找keydown

$('.select2-input').on("keydown", function(e) {
            if (e.keyCode == 13) {
                $("#select2-drop-mask").click();
                $('#name').focus();
                e.preventDefault();   
                }
       });

They're a little different. In this case, keypress isn't inserting anything into your field.

他们有点不同。在这种情况下,keypress 不会在您的字段中插入任​​何内容。

回答by Arlan T

For me worked

对我来说有效

$(document).on('keyup keydown', 'input.select2-search__field', function(e) {