Select2:防止 Select2 下拉菜单聚焦于点击
Select2: Prevent Select2 dropdown from getting focused on click
我们如何防止禁用的 Select2 下拉菜单聚焦于点击。可以很好地防止专注于按 'TAB' 键。
我已经尝试将 tabindex='-1' 添加到 Select2 层次结构中的各种 div 元素。 None 有帮助。
例如,参考 this link 转到他们的文档页面并尝试单击禁用的 Select2 示例,它将获得焦点,这在我的情况下不应该发生。
编辑:
尝试了@Guruprasad 对上述 link 的回答,但在 Chrome 的控制台上使用以下代码没有成功:
jQuery('.select2-container--disabled .select2-selection').on('click', function () {
console.log('clicked');
jQuery('.select2-selection').blur;
});
'clicked' 每次单击禁用的 select 时都会打印,但它不会移除元素的焦点。
就写这个JS
$('.select2-selection').on('click',function(){
$(this).blur();
});
更新
blur
应该是 blur()
jQuery('.select2-container--disabled').on('click', function () {
console.log('clicked');
jQuery('.select2-selection').blur();
});
更新 2:
我很难说你是否可以停止专注,但为了 ui
向用户展示它被禁用的观点,你可以在下面添加 css
:
.select2-container--default .select2-selection--single .select2-selection__rendered
{
cursor:not-allowed;
}
我们如何防止禁用的 Select2 下拉菜单聚焦于点击。可以很好地防止专注于按 'TAB' 键。
我已经尝试将 tabindex='-1' 添加到 Select2 层次结构中的各种 div 元素。 None 有帮助。
例如,参考 this link 转到他们的文档页面并尝试单击禁用的 Select2 示例,它将获得焦点,这在我的情况下不应该发生。
编辑:
尝试了@Guruprasad 对上述 link 的回答,但在 Chrome 的控制台上使用以下代码没有成功:
jQuery('.select2-container--disabled .select2-selection').on('click', function () {
console.log('clicked');
jQuery('.select2-selection').blur;
});
'clicked' 每次单击禁用的 select 时都会打印,但它不会移除元素的焦点。
就写这个JS
$('.select2-selection').on('click',function(){
$(this).blur();
});
更新
blur
应该是 blur()
jQuery('.select2-container--disabled').on('click', function () {
console.log('clicked');
jQuery('.select2-selection').blur();
});
更新 2:
我很难说你是否可以停止专注,但为了 ui
向用户展示它被禁用的观点,你可以在下面添加 css
:
.select2-container--default .select2-selection--single .select2-selection__rendered
{
cursor:not-allowed;
}