select2使用模态框，搜索框无法输入问题解决

最新推荐文章于 2022-11-07 13:45:37 发布
最新推荐文章于 2022-11-07 13:45:37 发布
阅读量4.7k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： select2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sayoko06/article/details/80318158
本文介绍了一个关于模态框自动添加tabindex属性导致Select2搜索框无法正常输入的问题及解决方案。通过移除该属性，使Select2控件恢复正常功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用模态框，一般都会自动带上一个属性，tabindex="-1",因为这个属性的存在，导致select2的搜索框无法输入，去掉这个属性即可解决。


    html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。  
     把控件的tabIndex属性设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。

bootstrap-select 模态窗口下 select选项被遮挡（显示不全）的问题解决办法
weixin_34247299的博客
05-20 2249
在模态窗口中该插件的下拉选项会被输入框遮挡，现给bootstrap-select控件绑定事件，当控件完全加载后设置控制下拉框的最小高度的属性，具体值请自行调试。 并且给输入搜索框绑定输入事件，做同样的处理。 本处理方式还有一个问题，假如删除搜索值重新搜索，就又被挡住了。重新点击下拉框按钮可以完全显示，由于不太影响使用，所以暂时不研究了。 HTML <select id="q...
flutter_smart_select:SmartSelect允许您使用各种选择输入（例如单选，复选框，开关，芯片或什至自定义输入）轻松地将通常的表单选择或下拉列表转换为动态页面，弹出对话框或滑动底页。 支持单选和多选
05-02
SmartSelect允许您使用各种选择输入（例如单选，复选框，开关，芯片或什至自定义输入）轻松地将通常的表单选择或下拉列表转换为动态页面，弹出对话框或滑动底页。 支持单选和多选。 受到Smart Select组件的启发。 4....
select2下拉框在模态框中无法正常显示的问题
m0_37158404的博客
12-09 1218
原因：select2的z-index值小于父容器的z-index值 设置select2的dropdownParent参数后，select2会根据据父容器的z-index值自动调整select2的z-index值 $("#org").select2({ language: 'zh-CN', dropdownParent: $('#orgBoxModal') }); $('#orgBoxModal')为下拉框所在模态框对应的jquery对象 ...
解决select2在bootstrap modal中不能正常使用的问题
12-10
最近用bootstrap做前端框架，遇到select2单选框在bootstrap modal中不能正常使用，输入框不能获取焦点智能过滤；如下图： 解决方法一：在bootstrap.js的模态框js内加上 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 如图： 第二种情况，网上看到的，不是我的体验： 他是说：由于 select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法：是把页面中的模态框的属性 tabindex=”-1″ 删掉, 或者值改为1 如图： 我这样做了
在BootStrap的modal中使用Select2搜索框无法输入
热门推荐
小虫的专栏
12-07 1万+
用modal来show一个对话框dialog.modal({ backdrop:true, keyboard:true, show:true });然后再modal中初始化select2dialog.find("select").select2({ formatNoMatches: function() { return "没有选项"; },
bootstrap 模态框里面使用select2插件 搜索框无法输入问题
u014528052的专栏
08-20 1038
select2 下面的搜索框 无法输入问题 这时候select2的搜索框无法输入,一般有两方面的原因  1.检查下modal的div中是否有tabindex=”-1”，这个属性 &lt;div class="modal fade in" id="dialog-new-draft"&gt;   2.js代码中加入 $.fn.modal.Constructor.prototype.enf...
select2的搜索框不能输入
qq_35591937的博客
11-07 817
模态窗口中select2不输入搜索
select2应用在modal模态框里，select2搜索框不能输入值
zh0lian的博客
11-18 1934
重写模态对话框的enforceFocus函数。<script type="text/javascript"> $.fn.modal.Constructor.prototype.enforceFocus = function () { }; </script>原因是模态对话框强制使自己处于焦点状态，导致select2的搜索框无法获取焦点所致
BootStrap模态框和select2合用时input无法获取焦点的解决方法
08-29
总结来说，当Bootstrap模态框和Select2插件同时使用时，若遇到input无法获取焦点的问题，可以尝试移除模态框的`tabindex="-1"`属性。这是最常见且有效的解决方案。如果你已经尝试过这种方法但问题依然存在，可能需要...
select2搜索框无法输入
最新发布
01-17
### Select2 搜索框无法输入的原因及解决方案 当遇到Select2搜索框无法输入的情况时，这通常是由于Select2组件与模态对话框之间的交互问题所引起的。具体来说，默认情况下Select2下拉列表是附加到`<body>`标签中的...
Select2在model模态框中不能输入问题
hanmfy的博客
08-29 2456
关于Select2在model模态框中不能输入问题，解决办法： 官网：试过，但是无效 但是下面这个方法是有效的， $.fn.modal.Constructor.prototype.enforceFocus = function () { };//加入这一行，就可以输入拉 $("#${field.id}").select2({ }); ...
select2使用模态框，文本搜索框无法输入问题解决
java_MrZHANG的博客
09-20 534
使用模态框，一般都会自动带上一个属性，tabindex="-1",因为这个属性的存在，导致select2的搜索框无法输入，去掉这个属性即可解决。
bootstrap模态框里的select2的搜索使用不了的问题
small_33的博客
07-30 459
珊妹儿今天遇到一个奇怪的问题哈，就是使用bootstrap的模态框，里面使用了select2的下拉框功能，但是发现select2原本自带的搜索框不能聚焦，使用不了了， 解决办法： 我们把模态框标签里的tabindex="-1"属性去掉就好了！！！！ ...
select2 下面的搜索框 无法输入问题
weixin_30299709的博客
06-19 314
这时候select2的搜索框无法输入,一般有两方面的原因1.检查下modal的div中是否有tabindex=”-1”，这个属性 <div class="modal fade in" id="dialog-new-draft"> 2.js代码中加入 $.fn.modal.Constructor.prototype.enforceFocus = function ...
select2的搜索框不能输入内容
勇往直前，向死而生
06-11 1010
select2的搜索框不能输入内容 原因：原来是模态对话框强制使自己处于焦点状态，导致select2的搜索框无法获取焦点所致。 解决办法：在初始化中重写模态对话框的enforceFocus函数 $.fn.modal.Constructor.prototype.enforceFocus = function () { } ...
解决：模态框中使用select2下拉选项无法搜索
weixin_34198453的博客
08-27 283
初始化时重写模态对话框的enforceFocus函数 $.fn.modal.Constructor.prototype.enforceFocus = function () { } 原文链接：https://blog.youkuaiyun.com/john1337/article/details/53315969 转载于:https://www.cnblogs.com/zhagzicheg/p/95431...
Select2下拉框不能输入的问题
xiaozhegaa的博客
03-11 1989
问题描述： 在页面中，使用select2插件，在数据展示页面的下拉框支持搜素，但是弹出添加页面的搜索框缺不支持搜索。 解决方法： 1、检查modal模态窗口中的div中是否含有tabIndex="-1"属性 2、在js代码中加入 $.fn.modal.Constructor.prototype.enforceFocus = function () { }; 就可以...
bootstrap模态框和select2合用时input无法获取焦点
liyanhui1001的专栏
04-24 600
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1.把页面中的 tabindex="-1" 删掉: <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-he..
select2插件在modal（模态框）中无法聚焦
qq_31281189的博客
06-17 1002
这个问题在开发过程中遇到过了，网上给出大多数做法都是在ready中加入以下代码： $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 后来在加班select2官网文档的时候，发现在4.0以后的版本，官方已经意识到了这个问题 并迅速的给出了解决办法 在select2的元素中添加dropdownParent属性 指明承...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你认识小汐吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值