jquery 捕获select2中的Enter键

vbopmzt1  于 2022-11-22  发布在  jQuery
关注(0)|答案(6)|浏览(249)

我使用select2来显示一个可编辑的选择框。当用户写了一条没有出现在list(select2, data)中的语句时,我会显示一个按钮来将该语句添加到列表中。
强迫用户点击按钮对我来说似乎有点挫败感。有没有可能在select 2中捕获enter键?我想让用户能够通过按enter键将他/她的新语句添加到列表中。

bybem2ql

bybem2ql1#

$('select2-search-field > input.select2-input').on('keyup', function(e) {
   if(e.keyCode === 13) 
      addToList($(this).val());
});
jgwigjjp

jgwigjjp2#

我使用的是Select2 4.0.3,我的工作方式如下:

$(document).on('keyup', '.select2-search__field', function (e) {
    if (e.which === 13) {
        alert('Pressed enter!');
    }
});
e1xvtsh3

e1xvtsh33#

我正在使用Select 2 4.0。这对我很有效;

$('.select2-search__field').on('keyup', function (e) {
        if (e.keyCode === 13)
        {
            alert('Enter key');
        }
    });
zqdjd7g9

zqdjd7g94#

Select2 4.0.6-rc1中这些都不起作用,但以下代码起作用了:

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

手册上有详细说明。

a1o7rhls

a1o7rhls5#

This code can help you with class-based selections:

$('.select2-selection').on('keyup', function(e) {
    var YOUR_SELECT2_CUSTOM_CLASS = $(this).attr('aria-labelledby').includes('YOUR_SELECT2_CUSTOM_CLASS')
    if (YOUR_SELECT2_CUSTOM_CLASS && e.keyCode === 13) {
        alert($(".YOUR_SELECT2_CUSTOM_CLASS").val())
    }
});

Or you can use this:

$("YOUR_CUSTOM_CLASS").bind("change keypress", function() {
  if (window.event.keyCode === 13) {
    alert("Enter Captured")
  }
})
7ajki6be

7ajki6be6#

如果 使用 了 传统 的 select2 ( 某些 3.5.4 ) , 则 可以 使用 此 选项 :

$('#mySelect2').on('select2-selected', function (e) {
    console.log(e.params);
    // keypress enter script
});

中 的 每 一 个
它 帮 了 我 很 大 的 忙 。 如果 页面 上 有 2 个 select2 , 则 捕捉 keyup 事件 不 是 一 个 选项 !

相关问题