bootstrap模态框input不能获取焦点并编辑【转】

最新推荐文章于 2020-11-12 10:30:18 发布
最新推荐文章于 2020-11-12 10:30:18 发布
阅读量340 收藏
点赞数
本文介绍了解决Bootstrap模态框中input标签无法编辑的问题，包括删除特定属性以兼容不同浏览器及添加novalidate属性的方法。

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

Bootstrap模态框时input标签【日期控件也有这样的问题】不能编辑的问题，下面是我的解决方法：

1.将下图中框出来的属性删掉即可：

　　

2.兼容火狐浏览器，笔者在火狐中还是不能编辑，去掉下图属性即可

　　

3.  记得在form中加这个属性 ------------>novalidate

　  如form层有【class="form-horizontal bootstrap-validator-form"】即去掉 form层中的 bootstrap-validator-form

　　

 

bootstrap中checkbox和input 在同一行时，input得到焦点不灵敏
u013344860的博客
03-28 1971
如代码使用Bootstrap，实现checkbox和input在同一行的中的效果，但鼠标在input的上方时，还是指针的状态，input无法得到焦点。<div class="panel-body"> <div id="common-div" style="display: inline;"> <form id=".
解决bootstrap模态框内输入框无法获取焦点
weixin_30374009的博客
09-30 710
bootstrap 模态框中的input标签在某些情况下会无法获取焦点。 最终解决方法：去除模态框的 tabindex="-1" 属性即可 转载于:https://www.cnblogs.com/feigao/p/5923648.html...
select2插件在modal（模态框）中无法聚焦
qq_31281189的博客
06-17 1000
这个问题在开发过程中遇到过了，网上给出大多数做法都是在ready中加入以下代码： $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 后来在加班select2官网文档的时候，发现在4.0以后的版本，官方已经意识到了这个问题 并迅速的给出了解决办法 在select2的元素中添加dropdownParent属性 指明承...
bootstrap模态框 内部input无法手动获取焦点
weixin_30540691的博客
04-24 196
//重写enforceFocus方法$(document).ready(function(){ $.fn.modal.Constructor.prototype.enforceFocus = function() { $("input").focus(); }; }) 网上也有说删除tabindex="-1" role="dialog"...
Bootstrap弹出层model上自定义的弹出层中input输入框失效, 无法输入
自由的刺猬
01-20 7209
做项目过程中，在model弹出层上面又自定义了一个弹出层，自定义弹出层上面有input输入框，但是却获取不了焦点，无法输入。网上找了下原因，这样说的：Bootstrap框架目前只支持一层model层，即当前model层上无法再用model弹出层。  于是我项目中的第二个弹出层用的是自定义的，但是输入框却获取不了焦点，无法输入。最后找到了解决方案，将弹出层  最外层div的 tabindex属性去掉
bootstrap模态框弹出后如何获得焦点
zhangjing1019的博客
11-08 2709
这个应该是，模态框出来后，让输入框获得焦点。所以，应该用JS去做这件事情。在模态框事件中，当模态框已经显示出来时，让输入框获得焦点。下来上代码。 在$(function(){})中增加以下代码： 在$(function(){})中增加以下代码： $('#weiChatPayment').on('shown.bs.modal',function(e){ //模态框的ID
BootStrap模态框和select2合用时input无法获取焦点的解决方法
08-29
总结来说，当Bootstrap模态框和Select2插件同时使用时，若遇到input无法获取焦点的问题，可以尝试移除模态框的`tabindex="-1"`属性。这是最常见且有效的解决方案。如果你已经尝试过这种方法但问题依然存在，可能需要...
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
在使用Bootstrap框架构建网页时，有时会遇到一个常见的问题，那就是Bootstrap弹出框（modal）中的输入框（input）无法获得焦点。...理解并掌握这些方法将有助于解决类似的问题，提高Bootstrap模态框的使用效率。
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
10-16
当CKEditor嵌入到Bootstrap模态框中时，由于模态框的存在，用户在点击CKEditor编辑区域时，模态框可能重新获得焦点，导致CKEditor无法保持焦点，从而无法输入文本。为了解决这个问题，需要确保CKEditor能够在模态框...
解决select2在bootstrap modal中不能正常使用的问题
12-10
最近用bootstrap做前端框架，遇到...他是说：由于 select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法：是把页面中的模态框的属性 tabindex=”-1″ 删掉, 或者值改为1 如图： 我这样做了
bootstrap的modal模态框导致input输入框无法输入的问题
ahook的专栏
11-12 2434
先说解决方法： 只要将模态框最外层DIV的tabindex="-1"的参数去掉即可。 情形： 当模态框开启时，在模态框外面的input文本框无法输入。 原因： 可能是bootstrap对模态框进行了某种设置导致，具体原因待查。 实例如下： <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开启模态框 </button> <!--模
使input文本框不可编辑的3种方法
热门推荐
u010210251的博客
11-08 16万+
今天试了一下使input文本框不可编辑的3种方法，现在总结一下： disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。 示例： readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切
bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
MR_SNAIL的博客
09-11 3506
bootstrap 模态框中弹出层 input不能获得焦点且不可编辑问题描述：bs框架支持一层model层的情况下，在模态框中弹出了自定义的弹出层。发现自定义弹出层的输入框不能获得焦点且不可编辑。解决方法：去除模态框中的”tabindex“属性。<div class="modal fade" tabindex="-1" role="dialog" id="myModal" data-backdrop
jquery ui dialog去除第一个文本框焦点问题
weixin_30388677的博客
11-15 185
最近做项目时，使用了jqueryUI dialog功能，当打开弹出框时，如果弹出框内容里面存在input，那么弹出框会自动获得第一个文本框焦点。 有时候，弹出框会有日期控件，一般日期控件采用focus触发事件，结合上述说的弹出框触发了日期的focus事件，造成弹出框和日期同时打开。这种用户体验效果非常差。 在网上看了很多解决方法的demo，使用过后都不能解决问题。仔细看了jqueryUI源代码...
bootstrap两个模态框弹出时，第一个模态框的input获取不到焦点
weixin_30455365的博客
09-12 320
1.清除tabindex='-1',tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。 (1).当浏览者使用TAB键在网页控件中移动时，将首先移动到具有最小tabIndex属性值的控件上，最后在具有最大tabIndex属性值的控件上结束移动(2).属性值相同时，以空间在htmL代码中的出现顺序为准, <div id="myModal" class=...
掌握Bootstrap模态框弹出效果的多样化实现
Bootstrap模态框是Bootstrap框架中提供的一个组件，用于创建对话框、信息框、表单等交互元素。模态框通常具有覆盖在页面内容之上的半透明层，以及一个可自定义的弹出框体。用户可以通过点击触发元素（如按钮）来显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值