简体   繁体   English

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

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

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 focusin event so the select 2 box opens up.当用户按下进入下一个输入字段时,获得焦点并以某种方式 iImanage 在focusin事件上打开 select2 select 框,因此 select 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.但是,当我 select 值并在选择 2 select 框中按回车键时,它不会关闭并在输入按键事件时保持打开状态,但它会关闭。 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.当我将输入键事件更改为任何按键事件时,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 搜索框中选择值并按回车键时,它会关闭并焦点移动到下一个输入字段或任何字段。

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。

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. 在这种情况下,按键不会在您的字段中插入任​​何内容。

为我工作

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

You cannot use jQuery to attach a keydown or keypress event handler to capture those events from a Select2;.您不能使用 jQuery 附加 keydown 或 keypress 事件处理程序以从 Select2; 捕获这些事件。 Therefore, you need to install a keydown event handler that captures the event before Select2 handles it.因此,您需要安装一个 keydown 事件处理程序,在 Select2 处理它之前捕获该事件。 You can do this with document.addEventListener('keydown', handler, true);您可以使用document.addEventListener('keydown', handler, true); . . That third parameter tells the browser to let your handler handle the keydown event first.第三个参数告诉浏览器让您的处理程序首先处理 keydown 事件。

Example:例子:

function myhandler(event){
if (event.keyCode == 117) {
event.preventDefault();
event.stopPropagation();

// do what you want when user press F6 on keyboard;
        return false;
    }
}

document.addEventListener('keydown', myhandler, true);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM