我正在寻找一种方法来防止select2的搜索框在打开下拉列表时自动获取焦点。我知道这是select2的默认行为,虽然对于桌面客户端来说这很好,但我需要在iPad上防止此行为,因为它会触发iPad的软键盘,这不是我们想要的默认行为。
我已经尝试了各种选项,但都没有成功。这里提供一个http://jsfiddle.net/KwW5n/2/,展示了我们的设置 - 我们使用一个简单的<select>元素作为select2功能的基础。
$('#source').select2();
我正在寻找一种方法来防止select2的搜索框在打开下拉列表时自动获取焦点。我知道这是select2的默认行为,虽然对于桌面客户端来说这很好,但我需要在iPad上防止此行为,因为它会触发iPad的软键盘,这不是我们想要的默认行为。
我已经尝试了各种选项,但都没有成功。这里提供一个http://jsfiddle.net/KwW5n/2/,展示了我们的设置 - 我们使用一个简单的<select>元素作为select2功能的基础。
$('#source').select2();
这对我在select2 v4上起了作用:
// keep search input, but avoid autofocus on dropdown open
$('#research .filter').on('select2:open', function (e) {
$('.select2-search input').prop('focus',false);
});
好的,我不确定除非你直接修改select2脚本(但我可能会错过这一点)否则是否可以改变焦点。作为解决方法,您可以通过将minimumResultsForSearch属性设置为负值来隐藏搜索框。
<select id="test">
<option>1</option>
<option>2</option>
</select>
然后:
$(document).ready(function() {
$('#test').select2({
minimumResultsForSearch: -1
});
});
setTimeout(firstInputFocus, 300);
函数 firstInputFocus() {
$("YourSelect2").focus();
通过设置这个微小的延迟,它可以工作。我能够将焦点从下拉列表中移开。在select2的“change”事件之后,它会执行一些内部操作来防止您立即更改焦点。对我来说,插入这个微小的延迟就解决了问题。
这里发布的解决方案都没有对我起作用,所以我使用了以下方法:
这将使搜索输入在打开时只读(防止移动设备上的键盘),然后当您单击输入时,它会删除readonly并打开键盘。
$('#myselectbox').select2({placeholder: "Select Something"}).on('select2:open', function(e){
$('.select2-search input').attr('readonly',true);
});
$('body').on('click', '.select2-search input', function(){
$(this).attr('readonly',false);
});
虽然@Choma的回答是可以的,但它会改变select2
在桌面和移动设备上的默认行为。
我必须为一个响应式网站找到一个解决方案:只在移动设备上阻止搜索输入框的自动聚焦,并保持桌面上的默认行为。
为了检测移动设备,我使用了Modernizr库,它可以测试浏览器中是否存在触摸事件。
我们可以在Modenizr v2上使用Modernizr.touch
,如果支持触摸事件,则返回true
,否则返回false
。
所以我们可以像这样修改@Choma的回答:
$('select').on('select2:open', function() {
if (Modernizr.touch) {
$('.select2-search__field').prop('focus', false);
}
});
https://codepen.io/andreivictor/full/QmKxOw/
$('select').select2({});
// will remove the searchbox and focus initially
$(".select2-search, .select2-focusser").remove();
// will remove the searchbox and focus on selection/close
$('select').on('select2:closing', function (e) {
$(".select2-search, .select2-focusser").remove();
});
我找到的唯一“解决方案”是在创建下拉菜单后立即删除.select2-input和.select2-focusser。当您不需要输入字段进行搜索时,这只适用于列表足够短的情况。
至少删除.select2-focusser可以防止选定选项时键盘弹出。
这个解决方案对我来说完美地运作了,在手机上测试过。
// prevent auto-focus on select2 search input
$('select').on('select2:opening', function(e) {
$('.select2-search input').prop('focus', 1);
});
也许有人需要~ 我已经尝试过这个,它有效~
$('#selectID').on('select2:opening', function (e) {
e.preventDefault();
});
当我使用Choma的解决方案时,在控制台中出现了JQuery的“太多递归”错误。
以下内容对于v4对我有效:
// keep search input available, but avoid autofocus and thus mobile
// keyboard appearing when dropdown opens.
$('body').on('select2:open','#subject', function (e) {
$('#modal .select2-search input').attr('readonly',true);
$('#modal .select2-search input').click(function(ev){
$('#modal .select2-search input').attr('readonly',false);
});
});
正如您所看到的,此select2字段位于带有id modal
的模态框中,而select2字段本身具有subject
id。当然,将选择器更改为适合您自己代码的内容。
基本上,当select2字段打开时,它会向输入添加readonly
属性,从而防止移动键盘出现,然后在单击/按下搜索字段时删除它,仅允许键盘出现。