Bootstrap input框获取焦点

最新推荐文章于 2022-04-24 17:17:05 发布
最新推荐文章于 2022-04-24 17:17:05 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37111049/article/details/103486259
版权

Bootstarp 打开模态框时，需要让指定的input框获取焦点。

在$(function(){})中增加以下代码：

$('#Modal').on('shown.bs.modal',function(e){     //模态框的ID
           $('#input').focus(); //通过ID找到对应输入框，让其获得焦点
                });

然而遇到了个小问题，发现input框还是没有获取焦点

解决办法：去除模态框的 tabindex="-1" 属性即可

Candy丿Wind
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap 模态框实现刷新网页并关闭功能
08-31
主要介绍了BootStrap 模态框实现刷新网页并关闭的功能，实现方法简单易懂,需要的朋友可以参考下
BootStrap模态框和select2合用时input无法获取焦点的解决方法
08-29
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入。怎么解决这个问题呢？下面小编给大家带来了BootStrap模态框和select2合用时input无法获取焦点的解决方法，一起看看吧
Bootstrap实现input控件失去焦点时验证
09-01
主要介绍了Bootstrap实现input控件失去焦点时验证的相关资料,非常不错，需要的朋友可以参考下，需要的朋友可以参考下
bootstrap中input框清除按钮
07-11
bootstrap input 框 清除 小插件、很简单的一个小的js，引入即可。省时省力。
Bootstrap 弹出框modal上层的输入框不能获得焦点问题
天马3798
08-25 1万+
1.在使用Bootstrap框架中目前modal弹出框只支持一层， 即在当前弹出框上不能再使用modal弹出框。 如果使用自定义的弹出框，例如：http://my.oschina.net/tianma3798/blog/737232 如果自定义弹出框中有input输入框，如果input 输入框不能获得焦点，则可能原因如下： 许多使用定义弹出层
modal模态框里的表单输入框，使用focus()方法无法自动获得焦点
weixin_42190844的博客
09-08 1272
在写界面的时候，要写增加功能。自然而然的写了一个弹框包含一个表单。因为嫌弃每次打开都需要点击输入框才能输入比较麻烦，所以想加一个自动聚焦的功能。结果就试了半天也不行。 正常的想法就是，给el-input注册一个ref，然后使用focus方法来聚焦。 这里遇到的问题就是，如下图，我在打开窗口的事件里，调用 this.$refs[‘nameInput’].focus() 发现并没有自动聚焦，怀疑是不是dom更新的问题，就加上了 $nextTick。然后发现还是没有效果。 查了一下，有可能是调用时机的问题.
bootstrap弹出的modal中表单控件无法获取焦点
EverJust的博客
12-16 898
bootstrap模态窗的表单控件无法获取焦点的解决办法
bootstrap模态框弹出后如何获得焦点
zhangjing1019的博客
11-08 2590
这个应该是，模态框出来后，让输入框获得焦点。所以，应该用JS去做这件事情。在模态框事件中，当模态框已经显示出来时，让输入框获得焦点。下来上代码。 在$(function(){})中增加以下代码： 在$(function(){})中增加以下代码： $('#weiChatPayment').on('shown.bs.modal',function(e){ //模态框的ID
去除Bootstrap输入框聚焦时的边框轮廓线
陈小峰（iefreer）的专栏
10-18 2万+
使用Bootstrap3的时候，好处是有很多现有的控件可以使用，坏处是个性化起来会遇到不少麻烦，单独的静态页面显示正常的， 引入Bootstrap后，有些类/通用界面组件的样式会被覆盖。想去除默认风格或定制input输入框的边框风格，可以使用如下代码：input:focus { outline: none; border-color: #cfdc00; box-shadow
bootstrap模态框和select2合用时input无法获取焦点
liyanhui1001的专栏
04-24 489
在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..
bootstrap-table表格实现拖拽鼠标快速选行
lyklinse的专栏
08-26 880
上周客户反馈友商系统页面中的表格可以通过按下鼠标左键然后移动鼠标，来快速选择表格复选框，希望我们系统把这个功能也加上。 目前我们系统内的表格都是用的bootstrap-table组件(https://bootstrap-table.com)来实现的。先在baidu、bing海外都搜索了一下，没有发现类似的案例参考。然后又研究了一下官网的手册，想从bootstrap-table的标准事件里入手，发现bootstrap-table对这类的事件是没有封装定义的。 最后是通过修改boot...
BootStrap 关于input与btn的点击focus取消特效相关css
wenjiayou_web的博客
11-11 882
BootStrap 关于input与btn的点击focus取消特效相关css 取消btn按钮点击出现的外边框： .btn:focus, /*清除btn按钮点击出现的边框*/ .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none !important; box-shadow:none !important; } 取消input框点击后出现的外边框：
bootstrap中checkbox和input 在同一行时，input得到焦点不灵敏
u013344860的博客
03-28 1857
如代码使用Bootstrap，实现checkbox和input在同一行的中的效果，但鼠标在input的上方时，还是指针的状态，input无法得到焦点。&lt;div class="panel-body"&gt; &lt;div id="common-div" style="display: inline;"&gt; &lt;form id=".
modal中的input输入框自动获取焦点的问题
热门推荐
赵又又的博客
07-24 2万+
在开发项目的过程中，有个需求是这样的，点击按钮，弹出一个modal框，要求modal框里的input自动获取焦点。 input输入框单纯的自动获取焦点是很简单的，只需要一个属性autofocus="autofocus"就够了。然而，这个属性触发的时机是页面刚加载的时候，需求是每次弹出modal都需要自动获取焦点。 此时又想到了另一种方法--给input设置ref属性。具体方法是这个样子的 ：给...
bootstrap 的模态框无法获取焦点
钟渊博客
11-05 5636
方法一： 重写 bootstrap 的focus 方法 $(document).ready(function(){ $.fn.modal.Constructor.prototype.enforceFocus = function() { $("#form").focus(); }; })这种方式有个缺点就是模态框加载时某一个组件只能获取焦点，再次点击就不能获取
解决bootstrap模态框内输入框无法获取焦点
weixin_30374009的博客
09-30 645
bootstrap 模态框中的input标签在某些情况下会无法获取焦点。 最终解决方法：去除模态框的 tabindex="-1" 属性即可 转载于:https://www.cnblogs.com/feigao/p/5923648.html...
bootstrap模态框无法使用jQuery的focus获取焦点问题
u011191042的专栏
11-05 1019
1.问题描述：   今天在测试使用jQuery获取boostrap模态框中的textarea的焦点时，无法获取焦点： $("#writeOffForm textarea[name=writeOffRemark]").focus(); 2.分析问题：   通过多次测试，在使用Chrome开发工具调试时，在打开模态框之后可通过 $("#writeOffForm textarea[name...
bootstrap 的模态框 内部组件无法获取焦点
xiawu1990的专栏
09-27 2181
1.重写 bootstrap 的focus 方法$(document).ready(function(){ $.fn.modal.Constructor.prototype.enforceFocus = function() { //$(".chosen-select").trigger("focus"); //$("#name").focus();
bootstrap input 样式
最新发布
06-06
Bootstrap输入框样式可以应用于各种表单输入框，如文本框、密码框、下拉框等，同时也支持各种输入框状态的样式，如聚焦、禁用、错误等。通过使用Bootstrap输入框样式，可以快速地构建出具有一致性和美观性的表单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值