OnFocus 和 OnBlur 样式更改在 Firefox 中有效，但在 IE 中无效

Question

大家好，我的 CSS 中有以下样式：

.on_focus {
    background-color:yellow;
}
.off_focus {
    background-color:white;
}

然后我的表单中有这个输入：

            <label>Last Name</label><br/>
            <input id="l_name" class="text" type="text" name="l_name" maxlength="20" onfocus="this.className='on_focus'" onblur="this.className='off_focus'"/><br/><br/>

这在 Fire Fox 中效果很好，但在 IE 中根本不起作用。在 IE 中，背景颜色永远不会改变，无论字段是否具有焦点，它始终是白色的。 这是怎么回事？

Answer 1

这不是唯一的选择，但实际上你可以只用 CSS 来做到这一点。

你的 CSS：

input[type="text"]:focus {background-color:Yellow;}
input[type="text"]:blur {background-color:White;}

您的 HTML：

<label for="l_name">Last Name</label>
<input type="text" id="l_name" />

我已经为 type=text 添加了属性选择器，所以这只适用于那些类型的输入标签。

--编辑--

就 IE 而言，以上内容仅适用于 IE8。那么，对于 JavaScript 解决方案，可以试试这个吗？

<script type="text/javascript">
    function onFocus(element) {
        //element.style.backgroundColor = "Yellow";
        element.className = "on_focus";
    }
    function onBlur(element) {
        //element.style.backgroundColor = "White";
        element.className = "off_focus";
    }
</script>

您的 HTML：

<label for="l_name">Last Name</label> 
<input type="text" id="l_name" onfocus="onFocus(this);" onblur="onBlur(this);" />