【问题标题】:Select2: Prevent Select2 dropdown from getting focused on clickSelect2:防止 Select2 下拉菜单专注于点击
【发布时间】:2015-08-17 18:20:03
【问题描述】:

我们如何防止禁用的 Select2 下拉菜单专注于点击。很好地防止了专注于按“TAB”键。

我已经尝试将 tabindex='-1' 添加到 Select2 层次结构中的各种 div 元素中。没有任何帮助。

例如,请参考this link 转到他们的文档页面并尝试单击禁用的 Select2 示例,它将获得焦点,这在我的情况下不应该发生。

编辑:

在 Chrome 的控制台上尝试了@Guruprasad 对上述链接的回答,但没有成功,代码如下:

jQuery('.select2-container--disabled .select2-selection').on('click', function () {
console.log('clicked');
jQuery('.select2-selection').blur;
});

每次我点击禁用的选择时都会打印'clicked',但它不会移除元素的焦点。

【问题讨论】:

  • 你能告诉我们你的 html 和 javascript 代码吗?
  • @Tushar & Jeremy C - 请访问上述问题中提供的链接,并考虑与我的下拉列表相同。单击禁用的下拉菜单,该下拉菜单以蓝色轮廓为焦点。我只是不想让它变得专注。

标签: javascript jquery html dom jquery-select2


【解决方案1】:

只要写这个JS

DEMO HERE

$('.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;   
}

UPDATED DEMO

【讨论】:

  • 感谢@Guruprasad 的快速回复。小提琴工作得很好。但是代码对我不起作用。即使我在 Google Chrome 控制台上的问题中提供的链接上也没有成功。使用我在 Chrome 控制台上编写的代码更新问题。
  • @VibhorDube 更新了答案.. 请检查,如果问题仍然存在,那么您可能需要发布渲染的 HTML..
  • 天哪...非常感谢... :)
  • 任何时候..快乐编码..:)
  • 我只是想知道我们是否可以防止盒子集中注意力。有可能吗?
猜你喜欢
  • 1970-01-01
  • 2021-10-14
  • 2023-02-18
  • 1970-01-01
  • 1970-01-01
  • 2018-08-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多