用bootstrap的时候不能获取text的焦点！_html/css

回复讨论(解决方案)

首页

web前端

html教程

用bootstrap的时候不能获取text的焦点！_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:24 AM

bootstrap text 焦点获取

http://pan.baidu.com/share/link?shareid=2370374828&uk=2687476845
我用bootstrap做模态对话框的时候，调用了2次对话框，即调用一个对话框以后，在这个对话框中再一次调用了一次模态对话框！但是其中出现了一些问题，就是第二次的模态对话框的文本框获取不到焦点！
文档我已经放在网盘，直接下解压就可以用！就是第二次的对话框中文本框不能获取焦点，但是复选框和单选框都是有用的！我知道是tabindex="-1"这个属性的问题！但是有没有人能解释这是为什么呀？为什么加了这个属性以后第二个对话框的文本框就不能获取焦点，但是其他的复选框，单选框能获取焦点？
希望哪位大神能后，下载下来运行一下，这是为什么？
如果不方便下载的话，那我这里把html的代码贴出来，但是bootstraps需要自己去下！html的代码如下

<html><meta charset="UTF-8"><head>	<link rel="stylesheet" href="bootstrap.min.css">	</head>	<body><div class="modal hide fade" tabindex="-1"  id="first">  <div class="modal-body">  	<input type="text">    <button type="button" data-toggle="modal" data-target="#second">跳出第二个对话框</button>  </div></div><div id="second" class="modal hide fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-body">    文本框<input type="text">   复选框 <input type="checkbox">    单选框 <input type="radio">  </div></div><button type="button" data-toggle="modal" data-target="#first">跳出第一个对话框</button><script src="http://code.jquery.com/jquery.js"></script>    <script src="bootstrap.min.js"></script>	</body></html>

登录后复制

跪谢

回复讨论(解决方案)

好像是焦点死循环了

这应该算是 bootstrap的BUG吧，我加了多对话框焦点管理下载

焦点死循环，只要按照你自己说的tabindex="-1"，去掉这个就OK了！关于焦点死循环你可以查阅相关的只是来了解下！

楼主解决了吗，告知下，我也是遇到这问题拉，

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1668

CakePHP 教程

1426

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

bootstrap搜索栏怎么获取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 获取搜索栏的值：确定搜索栏的 ID 或名称。使用 JavaScript 获取 DOM 元素。获取元素的值。执行所需的操作。

bootstrap垂直居中怎么弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 实现垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 类，将元素置于 flexbox 容器内。align-items-center 类法：对于不支持 flexbox 的浏览器，使用 align-items-center 类，前提是父元素具有已定义的高度。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。