【问题标题】：Why this input box doesnt fire the focus event on IE?为什么这个输入框不会在 IE 上触发焦点事件？
【发布时间】：2012-02-17 14:16:33
【问题描述】：

This 是我的代码：

HTML

<div style="position:relative;">  
    <div style="position:absolute; top:0; left:0; z-index:40;" class="textBoxColor">My <span style='color:#c83243;'>custom</span> text</div>        
    <input type="text" style="position: relative; z-index: 50;" class="textBoxEmpty">          
</div>

CSS

.textBoxEmpty, .textBoxColor
{
    margin:0;
    padding:0;
    border:0;
    line-height:20px;   
    font-size:20px;
    height:20px;
    width:340px;
    color:#000000;
    background-color:Transparent;
}

jQuery

$(".textBoxEmpty").focus(function() {
    $(this).css('background', '#ffffff');
});

单击“输入”（在文本上方）我无法集中输入。但是，如果我在文本附近（右侧）单击它会获得焦点！

为什么？我该如何解决？

【问题讨论】：

我在 Chromium 16 中运行良好。您使用的是什么浏览器？
傻我...我应该学会阅读。
小提琴问题中的代码：jsfiddle.net/nnnnnn/fHLex
@Matt Gibson : 7,8,9....每个...
nnnnnn ：我已经发布了小提琴......检查我的问题（靠近这个......）

标签： jquery html css input focus

【解决方案1】：

只需添加这个：

.textBoxEmpty:focus, .textBoxColor:focus {
    background-color: #fff;
}

你们都准备好了。

【讨论】：

【解决方案2】：

考虑使用 CSS ':focus' 伪而不是使用 jQuery 来操作 DOM

对于简单的更改，例如背景颜色，这将更有效

【讨论】：

CSS 和浏览器（opera...safari...IE）的麻烦太大了...这就是我使用 jquery 的原因...
无论如何它都是一个方便的功能，所以如果它在古代浏览器中不起作用 - 谁在乎。
我在乎...使用那些古老浏览器的人在乎...我们必须在乎这个...