bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

最新推荐文章于 2020-11-12 10:30:18 发布
最新推荐文章于 2020-11-12 10:30:18 发布
阅读量3.4k 收藏
点赞数 1
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mister_SNAIL/article/details/77936423
版权
bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

问题描述：bs框架支持一层model层的情况下，在模态框中弹出了自定义的弹出层。发现自定义弹出层的输入框不能获得焦点且不可编辑。

解决方法：去除模态框中的”tabindex“属性。

<div class="modal fade" tabindex="-1" role="dialog" id="myModal" data-backdrop="static">  
</div>
mister_snail
关注
专栏目录
解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决...
01-18 844
在做定制页面的时候，遇到这么一个问题，因为弹出框用的是bootstrap的自带的弹出框，控制显示和隐藏也是用自带的属性控制 控制显示，在触发的地方 例如botton上面加上 data-toggle="modal" data-target="#myModal" 控制关闭，在取消或者确定的地方加上 <button type="button" class="btn ...
bootstrap 彈窗默認打開_Bootstrap 手册 07 - JS 组件篇
weixin_39932692的博客
02-23 292
1. 动画过渡 TransitionBootstrap 对一些组件默认使用过渡动画效果，这种效果是由 CSS3 实现，故不支持 IE 6-8。模态弹窗 (Modal) 的滑动和渐变效果；选项卡 (Tab) 的渐变效果；警告框 (Alert) 的渐变效果；图片轮播 (Carousel) 的滑动效果；2. 模态弹窗 ModalBootstrap 模态弹窗通常有以下表现——点击某按钮后弹窗，弹窗内容为文...
解决bootstrap模态框内输入框无法获取焦点
weixin_30374009的博客
09-30 667
bootstrap 模态框中的input标签在某些情况下会无法获取焦点。 最终解决方法：去除模态框的 tabindex="-1" 属性即可 转载于:https://www.cnblogs.com/feigao/p/5923648.html...
Bootstrap 不可编辑的控件
歪脖先生的博客
03-07 7990
不可编辑的控件HTML中，通过设置 disable 属性，可以让一个表单元素不可编辑。Bootstrap中，允许为任何标签添加 .uneditable-input 类，来创建不可编辑的控件。如，使用 &lt;span&gt; 标签创建一个不可编辑的文本输入框，让它看上去像个文本输入框，但实际上不是文本输入框，也不可编辑：&lt;span class="input-xlarge uneditable...
让INPUT不可编辑
你有什么可以拽？
11-02 1万+
 input的两个属性：disable,readyonly. 但disable会变成灰色
Bootstrap打开Modal后再打开编辑层, 文本框不能输入
D的专栏
07-22 2630
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> $("#setId").modal({"backdrop":"static"}).modal('show'); 去掉tabindex="-1"
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
如果需要在modal中嵌套modal，可以考虑使用自定义的弹出层实现。例如，使用JavaScript或jQuery来创建和管理这些层。确保在自定义代码中处理好焦点转移逻辑，确保输入框可以正常获取焦点。 3. **使用CSS调整层级**...
Bootstrap 的 JavaScript 插件
soindy
03-28 1018
整理自慕课笔记 Bootstrap V3.2中提供了12种JavaScript插件，他们分别是： * 动画过渡（Transitions）:对应的插件文件“transition.js” * 模态弹窗（Modal）:对应的插件文件“modal.js” * 下拉菜单（Dropdown）：对应的插件文件“dropdown.js” * 滚动侦测（Scrollspy）：对应的插件文件“scrollsp
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 3958
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
几种设置表单元素中文本输入框不可编辑的方法总结
12-02
代码: 代码如下:<input type=”text” value=”fisker” onclick=”alert(this.value);” onfocus=”this.blur()” /> 输入框无法获得焦点，不能编辑 表单可以获得值。 可以复制。 蛮奇怪的，都选住了，还没有获得焦点？ 2,readonly 代码: <input type=”text” value=”fisker” onclick=”alert(this.value);” readonly /> 输入框只读。不能编辑 同样表单可以获得值。 也可以复制。 3,disabled 代码: 代码如下:<input t
Bootstrap 弹出框modal上层的输入框不能获得焦点问题
天马3798
08-25 1万+
1.在使用Bootstrap框架中目前modal弹出框只支持一层， 即在当前弹出框上不能再使用modal弹出框。 如果使用自定义的弹出框，例如：http://my.oschina.net/tianma3798/blog/737232 如果自定义弹出框中有input输入框，如果input 输入框不能获得焦点，则可能原因如下： 许多使用定义弹出层
bootstrap的modal模态框导致input输入框无法输入的问题
ahook的专栏
11-12 2189
先说解决方法： 只要将模态框最外层DIV的tabindex="-1"的参数去掉即可。 情形： 当模态框开启时，在模态框外面的input文本框无法输入。 原因： 可能是bootstrap对模态框进行了某种设置导致，具体原因待查。 实例如下： <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开启模态框 </button> <!--模
bootstrap-tagsinput禁止用户修改tag
阳水平的博客
01-14 1176
禁止用户修改： $( "#tagsInputId" ).prop( "disabled", true ); 参考：https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues/112 设置分隔符： $('input').tagsinput({ confirmKeys: [13, 44] //enter和逗号 }); ...
jq bootstrap模态框弹出同时模态框中输入框获取焦点方法
张小三的博客
07-18 2331
 1.点击的按钮： &lt;button class="btn btn-primary" id="connectionBtn"&gt; 书/码关联&lt;/button&gt; 2.模态框： &lt;div aria-labelledby="myModalLabel" class="modal fade bs-example-modal-lg" id="connect
弹出框动态增加input输入框
Reborn_Chang的博客
04-21 5355
欢迎关注微信公众号：程序员小圈圈原文首发于：www.zhangruibin.com 本文出自于：RebornChang的博客 转载请标明出处^_^ 弹出框动态增加input输入框 最近项目上有这么一个需求，一条订单，我想动态的输入外部订单号，支持输入多个外部订单号，当外部订单号为空的时候，可以新增外部订单号。当输入过外部订单号的时候，可以对外部订单号进行修改，也就是旧有外部订单号要回显。 那我...
使input文本框不可编辑的3种方法
热门推荐
u010210251的博客
11-08 16万+
今天试了一下使input文本框不可编辑的3种方法，现在总结一下： disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。 示例： readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切
使文本框不可编辑的方法
逆风奔跑。。不要去考虑什么天赋异禀，一切都来自经历和渴望。
06-27 5627
很多时候，有的数据有查看和编辑两种状态，在查看状态下，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有两种。       方法1: onfocus=this.blur()       方法2:readonly       方法3: disabled  一下分别是readonly和disab
基于java的共享汽车管理系统的开题报告2.docx
最新发布
09-25
基于java的共享汽车管理系统的开题报告2.docx
Bootstrap模态弹出框详解与应用
"Bootstrap模态弹出框是前端开发中常用的一种交互元素，它允许在不离开当前页面的情况下展示额外信息或进行交互操作。本文档是根据慕课笔记整理的关于Bootstrap模态弹出框的知识点，适用于学习和参考。\n\n在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值