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

最新推荐文章于 2023-09-15 17:16:01 发布
原创 最新推荐文章于 2023-09-15 17:16:01 发布 · 582 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#select2

本文介绍了一个常见问题：使用模态框时，由于tabindex属性的存在，导致Select2的搜索框无法正常输入。文章提供了简单有效的解决方案，即移除该属性，使Select2搜索功能恢复正常。

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

DE.Marcia
关注
22、Mac OS X 开发：窗口、菜单与模态框的使用指南
gamma的博客
10-25 16
本文详细介绍了Mac OS X应用开发中窗口、菜单与模态框的使用方法。内容涵盖创建自定义窗口控制器、实现模态对话框（如警报面板和文件打开/保存面板）、构建系统菜单及使用绑定技术动态控制菜单项状态。通过具体代码示例和操作流程图，帮助开发者掌握Cocoa框架下的GUI开发核心技巧，并结合实际案例与未来趋势分析，为开发用户友好、功能丰富的macOS应用提供全面指导。
jquery实现静态搜索功能(可输入搜索文字)
10-20
使用jQuery，我们可以监听用户的输入事件，当用户在搜索框中输入时，执行搜索逻辑。首先，我们需要获取用户输入的搜索文本，然后遍历每个选项卡中的内容，查找包含该文本的元素，并将其显示出来，反之则隐藏。 ``...
select2的搜索框不能输入
qq_35591937的博客
11-07 845
模态窗口中select2不输入搜索
select2使用模态框，搜索框无法输入问题解决
sayoko06的博客
05-15 4807
使用模态框，一般都会自动带上一个属性，tabindex="-1",因为这个属性的存在，导致select2的搜索框无法输入，去掉这个属性即可解决。    html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。       把控件的tabIndex属性设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。...
bootstrap 模态框里面使用select2插件 搜索框无法输入问题
u014528052的专栏
08-20 1050
select2 下面的搜索框 无法输入问题 这时候select2的搜索框无法输入,一般有两方面的原因  1.检查下modal的div中是否有tabindex=”-1”，这个属性 <div class="modal fade in" id="dialog-new-draft">   2.js代码中加入 $.fn.modal.Constructor.prototype.enf...
select2应用在modal模态框里，select2搜索框不能输入值
zh0lian的博客
11-18 1952
重写模态对话框的enforceFocus函数。<script type="text/javascript"> $.fn.modal.Constructor.prototype.enforceFocus = function () { }; </script>原因是模态对话框强制使自己处于焦点状态，导致select2的搜索框无法获取焦点所致
在BootStrap的modal中使用Select2搜索框无法输入
热门推荐
小虫的专栏
12-07 1万+
用modal来show一个对话框dialog.modal({ backdrop:true, keyboard:true, show:true });然后再modal中初始化select2dialog.find("select").select2({ formatNoMatches: function() { return "没有选项"; },
reacthook+antd modal模态框里放一个table表格进行搜索框数据填写的时候选择搜索项onChange事件会导致模态框重新重新渲染。实现模态框搜索数据的时候列表刷新并且模态框不会关闭，使用usememo应该可以解决这个问题。可以帮我写个小demo。
06-06
当您在模态框中使用搜索框时，每次更改搜索项时，会导致整个模态框重新渲染。这是因为每次更改搜索项时，该组件的状态都会被更新，从而导致重新渲染。为了避免这种情况，您可以使用 useMemo 钩子来记忆搜索结果。...
MacOSX开发：窗口、菜单与模态框的使用指南
### Mac OS X 开发：窗口、菜单与模态框的使用指南 在 Mac OS X 开发中，窗口、菜单和模态框是构建用户界面的重要元素。下面我们将详细介绍如何创建自定义窗口控制器、使用模态窗口以及设置系统菜单等内容。 #### ...
select2 下面的搜索框 无法输入问题
weixin_30299709的博客
06-19 339
这时候select2的搜索框无法输入,一般有两方面的原因1.检查下modal的div中是否有tabindex=”-1”，这个属性 <div class="modal fade in" id="dialog-new-draft"> 2.js代码中加入 $.fn.modal.Constructor.prototype.enforceFocus = function ...
bootstrap模态框里的select2的搜索使用不了的问题
small_33的博客
07-30 479
珊妹儿今天遇到一个奇怪的问题哈，就是使用bootstrap的模态框，里面使用了select2的下拉框功能，但是发现select2原本自带的搜索框不能聚焦，使用不了了， 解决办法： 我们把模态框标签里的tabindex="-1"属性去掉就好了！！！！ ...
select2的搜索框不能输入内容
勇往直前，向死而生
06-11 1039
select2的搜索框不能输入内容 原因：原来是模态对话框强制使自己处于焦点状态，导致select2的搜索框无法获取焦点所致。 解决办法：在初始化中重写模态对话框的enforceFocus函数 $.fn.modal.Constructor.prototype.enforceFocus = function () { } ...
select2下拉搜索input框无法输入
qq_47189438的博客
09-15 495
Jquery的select2组件下拉框中搜索input无法选中输入
Select2下拉框不能输入的问题
xiaozhegaa的博客
03-11 2036
问题描述： 在页面中，使用select2插件，在数据展示页面的下拉框支持搜素，但是弹出添加页面的搜索框缺不支持搜索。 解决方法： 1、检查modal模态窗口中的div中是否含有tabIndex="-1"属性 2、在js代码中加入 $.fn.modal.Constructor.prototype.enforceFocus = function () { }; 就可以...
bootstrap模态框和select2合用时input无法获取焦点
liyanhui1001的专栏
04-24 615
在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 模态框中无法智能搜索
阿Q的记事本
04-27 774
在写一个项目时，用了bootstrap 前端UI框架，当用SELECT2 时却发现无法使用，最后反复测试发现，select2 在模态框中无法使用智能搜索的功能。  后来在网上找了一个方法，在模态框中的JS 脚本里加入以下代码即可：       $.fn.modal.Constructor.prototype.enforceFocus = function () { };    
模态框回车搜索的实现
javaboy
09-07 979
       总结一个小功能，实现过程如下：      功能一：  /* 模态框回车搜索的实现： */           //①先禁止回车触发表单提交           $(document).keydown(function(event){                  if (event.keyCode == 13) {                   $('#addClerk...
select2 控件在jquery-ui dialog下无法搜索问题解决
weixin_34310369的博客
05-28 315
2019独角兽企业重金招聘Python工程师标准>>> ...
【项目问题】nz-select多选在输入中文进行搜索的时候，光标在文字左侧（BUG）
Dai的博客
01-06 600
【项目问题】nz-select多选在输入中文进行搜索的时候，光标在文字左侧（BUG）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值