IE8下input无法获得焦点的诡异问题

IE8下input聚焦难题

最新推荐文章于 2024-10-13 21:40:04 发布

原创

最新推荐文章于 2024-10-13 21:40:04 发布 · 6.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #ie #div #google #dll #百度

在内网XP SP3系统及IE8环境下，输入框(input)出现无法获取焦点的诡异问题。排查了dll缺失、兼容模式等因素，发现是input背景设为none或透明，且下层元素非透明，同时input无初始值导致。解决方法包括取消input背景透明或设定初始值。

今天遇到一个诡异问题，场景如下
1.内网，XP（sp3），IE8
2.input无法得到焦点

查遍百度google，否定dll缺失问题，兼容模式问题等等，扒开一层层css最终得到真相

重现问题

<div>
    <div style="position:absolute;top:0;left:0;"><input type="text" style="background:none;"/></div>
    <img src="http://avatar.youkuaiyun.com/A/C/6/3_yuyu2005.jpg"/>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yuyu2005

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

windows下32位汇编语言学习笔记

个人博客

11-10

5202

windows下32位汇编语言学习笔记第一章第一章背景知识 80x86处理器的存储器 4个数据寄存器 EAX,EBX,ECX,EDX EAX寄存器所有API函数的返回值都保存在EAX里,注意是返回值，不是返回参数，本书3.2.2 节，说是winapi的返回值，而经过我测试，自定义函数的返回值也一样保存在eax里。 EBX寄存器

最全面、最详细web前端面试题及答案总结

热门推荐

HanXiaoXi_yeal的博客

02-01

3万+

2021最全面、最详细web前端面试题及答案总结总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript

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

IE文本框无法输入，无法获取焦点的解决办法。

章郎虫的专栏

07-30

868

故障现象 Internet Explorer或任何基于IE的浏览器打开后，所有网页的输入框中都不能输入数据，也无法选中文本框让文本框获取焦点，同时也不能选择网页上的文字。故障原因这是由于HTML编辑相关模块 %windir%\system32\mshtmled.dll 库文件丢失,损坏或反注册造成的。 %windir%为系统环境变量，表示系统目录,如为XP系统此变...

input框在页面中不能获取焦点解决方法

zoepriselife316的博客

12-26

3689

input框在页面中不能获取焦点解决方法创建一个input元素， <input id="refse" style="opacity: 0;width:0" /> js中： const viewInput = document.getElementById('refse'); //获取元素 viewInput.focus(); //触发一下focus事件添加了，就可以了 webview中不能主动获取，自己创建元素触发下获取焦点，再去点击其他的输入框，就可以有样式了 ...

IE8 focus 失效解决方案

weixin_33834910的博客

06-27

842

这几天遇到两个在IE8下focus失效的非常奇怪的问题，当然这个是指JS函数：document.getElementById("id").focus(); 或者 $("#id").focus(); 问题一：楼主的页面是在ifram中，点击ifram中的保存按钮后，会重定向到这个页面，并且在domcument.ready()中会将焦点给予第一个文本框。但奇怪的是，第一次打开这个页面是没有问题的...

五八、移动端input、textarea无法获取焦点

梅某某

02-01

5479

-webkit - touch - callout: none; . 阻止长按图片之后呼出菜单提示复制的行为 -webkit-text-size-adjust: none; . 禁用Webkit内核浏览器的文字大小调整功能。 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); . 避免点击a标签或者注册了click事件的元素时产生高亮 -webkit-

html中li标点为什么动不了,html Li标签中的textarea标签无法获得焦点。

weixin_32440261的博客

07-05

471

1.用jquery写一个问卷，有一道题是如果选了这道题的某个选项那么这个选项会被打钩并且会出现一个输入框供用户输入描述，如下图：再次点击这个选项则输入框消失，选项收起，我用的是Li标签，给Li标签绑定点击事件，如果被点击那么插入一个textarea标签，但是这时候被插入的textarea标签无法获得焦点，我想点击这个选项后点击输入框输入文字，但是选项被收起了，相当于触发了Li的点击事件，我的解决...

javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

12-12

在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...

前端面试题

qq_41887655的博客

08-08

2万+

前端面试题汇总一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...

ionic3软键盘弹出后ion-input以及ion-textarea标签点击时无法获取焦点的问题

冰咖啡的专栏

04-02

1934

ionic默认android:windowSoftInputMode="adjustResize"，但是这种设置存在一个弊端，就是如果表单过长，在弹出软键盘时就会存在页面上下滚动的问题，偶尔会造成键盘遮挡输入框，于是修改成android:windowSoftInputMode="adjustPan"，果然输入框不会再有遮挡的现象出现，但是出现了另一个问题，就是某些在页面下方的输入框在软键盘弹出几......

iostextarea获取焦点_移动端ios系统中表单标签无法获取焦点

weixin_29145157的博客

01-16

614

做移动端网页的时候发现在ios系统中表单组件无法获取焦点，无法输入-webkit - touch - callout: none;//-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为//禁用Webkit内核浏览器的文字大小调整功能。-webkit-text-size-adjust: none;//避免点击a标签或者注册了click事件的元素时产生高亮-...

uniapp项目在微信小程序的弹窗中的textarea的focus属性不能获取到焦点，而H5却可以。

最新发布

qq_59835987的博客

10-13

1014

有个执行顺序的问题。将textarea中的focus属性绑定一个ref属性isFocus(默认值为false)，然后在打开弹窗的时候利用nextTick方法，将isFocus属性变为true即可完成在小程序的弹窗中的textarea中光标的聚焦。

【IE兼容性】background:transparent IE中Bug，不能选中input输入框，出现这个问题主要是IE8

Draco

06-15

1万+

先解释下，background:transparent，默认在IE上会被解析成 background: none transparent scroll repeat 0% 0% transparent表示透明无颜色 none 表示没有设置背景图片 repeat 表示图片重复 scroll 表示背景图片随浏览器下拉而滚动 0%水平位置在x0 0%垂直位置在y0

html ie8 设置透明,html – 具有透明背景的输入框在IE8中不可点击

weixin_29832179的博客

06-16

200

我在一个窗体中有一个绝对定位的输入框。输入框有透明背景：.form-page input[type="text"] {border: none;background-color: transparent;/* Other stuff: font-weight, font-size */}令人惊讶的是，我不能通过点击它在IE8中选择这个输入框。它在Firefox中工作完美。对于背景也是如此：none...

关于input与IE8的一些事

YanzYan的博客

03-16

1693

如题今天想来记录下关于input一些属性如何兼容IE8，如placeholder… 闲谈等下啊先唠唠家常毕竟是我个人的博客最近也有些感慨故记录一下前两篇我写的都是关于微信小程序的内容，那时候是一月份，最近的一篇也是在1月16号，今天刚好是3月16号，想来也是缘分。刚刚好两个月，我终于又登上了自己的博客，而这一次我终于不再是小白了，至少不是前端小白哈哈。不过关于安卓，也忘

前端给某个元素加上position：absolute导致input框无法点击

m0_46544598的博客

02-10

655

可能是因为元素绝对定位之后把input框藏在其他元素的后方了。具体解决办法：给加绝对定位的同时加上z-index层级高一点。我这儿加的是3，可以打开f12慢慢调，建议不要层级过大。解决办法：把input框置顶。

移动端H5 页面 input 获取焦点不灵敏

weixin_34209851的博客

06-14

4290

开发中遇到ios的浏览器中input控件获取焦点，需要一定的点击时长，所以用户经常无法一次成功获取焦点。改进方法非常的简单。在input控件外面包裹一层div，然后在div上添加点击事件，为input手动获取焦点。 vue代码为例 temp模板: <div @click="inputClicked" > <input ref="phoneInput" &gt...

解决微信小程序开发者工具输入框焦点问题

aozhi7108的博客

07-28

1518

Windows10笔记本上运行微信小程序开发者工具，输入框（input，textarea）没有焦点，只能在真机调试，效率太低。后来发现是Window10对笔记本高分屏支持不好，要DPI缩放，导致兼容性问题。解决方法：显示设置、缩放与布局改为100%。这样就可以点击输入框了，但是字体变得很小，最好是外接显示器。不修改DPI缩放，长按输入框即可！转载于:https...

ElementUI框架el-table组件中嵌入el-input输入框无法获取焦点、无法编辑问题

cd_yang2017的博客

03-08

2726

el-table组件中嵌入el-input输入框无法获取焦点，无法编辑。可使用父元素监听方式获取焦点。