Bootstrap弹出层model上自定义的弹出层中textarea,input输入框失效, 无法输入

最新推荐文章于 2023-08-28 11:40:36 发布

转载最新推荐文章于 2023-08-28 11:40:36 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/who_is_xiaoming/article/details/54630757

本文介绍了解决在Bootstrap框架中使用双层Modal时，内层Modal的input输入框无法获取焦点的问题。原因是Bootstrap目前仅支持一层Modal，解决方法是移除外层div的tabindex属性。

在model弹出层上面又自定义了一个弹出层，自定义弹出层上面有input输入框，但是却获取不了焦点，无法输入。
原因是：Bootstrap框架目前只支持一层model层，即当前model层上无法再用model弹出层。
解决方案：将弹出层最外层div的 tabindex属性去掉即可（如下面的代码示例，将tabindex这个属性去掉，不要改变其属性值，改变属性值是没用的）

<div class="modal fade" id="template-modal" tabindex="-1" role="dialog" aria-hidden="true">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

haogemr

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决 Bootstrap 弹出框（Modal）上层的输入框无法获得焦点的问题

CsCufft的博客

10-05

653

在使用 Bootstrap 的弹出框（Modal）时，有时会遇到一个问题：当弹出框显示在页面上方时，其中的输入框无法获得焦点，即无法进行键盘输入操作。这可能会给用户带来困扰，因此我们需要找到解决这个问题的方法。问题的原因是，Bootstrap 的弹出框默认使用了遮罩层（Backdrop），该遮罩层位于弹出框之上，阻止了用户与页面其他元素的交互。遮罩层的存在导致弹出框上的输入框无法获得焦点。为了解决这个问题，我们可以通过一些 JavaScript 的操作来移除或禁用遮罩层，使得输入框可以正常获得焦点。

前端面试八股文（超详细）

热门推荐

m0_50861631的博客

03-06

16万+

JavaScript \1. Promise 的理解 Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败）只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。回调地狱回调函数中嵌套回调函数的情况就叫做回调地狱。回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。一、Promise是什么？ Promise是最早

参与评论您还未登录，请先登录后发表或查看评论

layer.open弹出框不能获取input框的值为空

jaryle的专栏

04-04

9981

最近使用layer框架来做页面弹出框操作。总是不能获取弹出框中input的值，代码如下：红色标记区域添加js代码 //Ajax添加品牌 function addBrandWI(){ layer.open({ type: 0, title: '品牌添加', shadeClose: true, shade: 0.8, btn: ['保存', '取...

bootstrap的modal模态框导致input输入框无法输入的问题

ahook的专栏

11-12

2519

先说解决方法：只要将模态框最外层DIV的tabindex="-1"的参数去掉即可。情形：当模态框开启时，在模态框外面的input文本框无法输入。原因：可能是bootstrap对模态框进行了某种设置导致，具体原因待查。实例如下： <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开启模态框 </button> <!--模

Bootstrap弹出层model上嵌套的弹出层中input输入框无法输入问题解决方案

Flowering_Vivian的博客

09-23

1100

做项目过程中，在model弹出层上面又自定义了一个弹出层，自定义弹出层上面有input输入框，但是却获取不了焦点，无法输入。原因：Bootstrap框架目前只支持一层model层，即当前model层上无法再用model弹出层。解决方案：将Bootstrap弹出层最外层div的 tabindex属性去掉即可（如下面的代码示例，将tabindex这个属性去掉，不要改变其属性值，改变属性值是没用的） <div class="modal fade" id="template-modal" tabindex

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

MR_SNAIL的博客

09-11

3568

bootstrap 模态框中弹出层 input不能获得焦点且不可编辑问题描述：bs框架支持一层model层的情况下，在模态框中弹出了自定义的弹出层。发现自定义弹出层的输入框不能获得焦点且不可编辑。解决方法：去除模态框中的”tabindex“属性。<div class="modal fade" tabindex="-1" role="dialog" id="myModal" data-backdrop

layui数据表格，自定义头部中使用input输入框不可输入问题

Whales_w的博客

01-18

2739

问题出在这个属性，解决办法font-size给个值就行了原始是font-size：0所以什么都输入不进去 //input继承父级的字体大小 font-size: inherit; 通过查看他的父级属性确实设置 font-size：0 总结一下input什么情况不能输入吧： 1. input框设置了readonly属性只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。 readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选

forms.Textarea()

最新发布

09-11

我们正在讨论Django中的`forms.Textarea`小部件(widget)。根据引用[1]、[2]、[3]和[4]，我们可以总结如下： ### `forms.Textarea`概述 `forms.Textarea`是Django表单中的一个**小部件(Widget)**，用于将表单字段...

2021年最新Web前端面试题精选大全及答案

m0_54861649的博客

03-07

2292

使用layui的layer.open加载jsTree发现弹出框里的input和button事件不触发，改用bootstrap弹出框后又遇到undefined (reading ‘on‘)

leokone的博客

04-03

302

解决办法，在初始化jsTree之前添加。

ios端网页中Textarea按钮一输入内容页面其他按钮都失效无法点击的解决方法

小孩子

12-10

971

在ios端网页中，如果你一个页面有一个textarea还有其他的按钮很容易造成，一改变Textarea其他按钮立即失效的情况，碰到之后一直各种办法都没找到原因，后来在网上看到别人的一个解答微信6.7.4版本，部分ios系统12.1.1手机 textarea弹框输入完成在会后，点击确认转单或者审核按钮点击失效问题 // 原因是，当软键盘隐藏的时候，遮罩层回到原位，但是body未回到原来位置，需要手...

bootstrap modal和select2 冲突，select2模糊查询输入框不能输入内容

05-30

1611

最近在维护一个古董级的项目时，发现模态框里面select2模糊查询的输入框不能聚焦，同时也不能输入内容，很是奇葩。虽然现在vue、angular等框架成为了主流，但对于以前的项目还得维护，今天在这里做个总结吧。（该输入框在bootstrap 中modal弹窗中） 输入框不能聚焦，也不能输入内容，最开始我以为是css定位z-index层级缘故，其他层把输入框覆盖到上面，或...

Bootstrap中使用row没用问题

Running_boy_的博客

12-06

2068

今天刚学Bootstrap，用栅格系统时没有效果。简单的说就是，用row没有用，本来应该是两个div平分一行，结果它们各占一行。 <div class="container"> <div class="row"> <div class="col-md-6 c1"></div> <div class="col-md-6 c1"></div> <div> 心想可能是导入jQuery

关于layer.open弹出框input文本框 innerHtml 或 innerText 赋值不生效

u012835679的专栏

08-21

1375

问题：在写一个js小效果时，要给input文本框赋值，但赋值后却不生效，input框里面不管怎么赋值都是空白的。 num.innerText = "1 18 7 11 18 20 23"; 打开控制台看到input标签里面的值是以及变动了的解决方案：突然意识到input的赋值是不一样的，input赋值是用value赋值的，和其他标签赋值搞混了。所以只要将innerText 换成innerHtml 就行了 num.value = "1 18 7 11 18 20 23";

select2搜索框无法输入 Bootstrap 模态框

你好陌生人的博客

09-21

1474

去掉模态框的div中的 tabindex="-1" 这个属性 div class="modal fade" role="dialog" aria-hidden="true" data-backdrop="static"> div class="modal-dialog" role="document"> div class="modal-content"> d

ckeditor在bootstrap中modal中弹框无法输入问题，网上千篇一律的有出报错的解决办法，来看看完整答案吧

北派三叔聊技术

05-14

478

引入ckeditor的代码后执行以下代码，不会出现其他传的那个有问题的答案，麻烦你们抄别人作业的时候也要认真一点啊！ $.fn.modal.Constructor.prototype.enforceFocus = function () { var $modalElement = this.$element; $(document).on('focusin.modal', function (e) { var $parent = $(e.target.parentNode

Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

weixin_34357436的博客

11-19

1250

单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。为了让控件在各种表单风格中样...

elementUI 的 input无法输入bug解决

weixin_45551442的博客

08-28

1027

elementUI 的 input无法输入bug解决

Bootstrap弹出层model上自定义的弹出层中input输入框失效, 无法输入

自由的刺猬

01-20

7233

做项目过程中，在model弹出层上面又自定义了一个弹出层，自定义弹出层上面有input输入框，但是却获取不了焦点，无法输入。网上找了下原因，这样说的：Bootstrap框架目前只支持一层model层，即当前model层上无法再用model弹出层。于是我项目中的第二个弹出层用的是自定义的，但是输入框却获取不了焦点，无法输入。最后找到了解决方案，将弹出层最外层div的 tabindex属性去掉

Bootstrap 多选弹出层插件：简单实现与扩展指南

Bootstrap弹出层组件（Popovers）是一种覆盖在页面元素上的小弹窗，常用于提供额外信息或引导用户做出选择。它与工具提示（Tooltips）类似，不同之处在于弹出层能够承载更丰富的内容，包括文本、图片、表单等。 ...