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);" />

OnFocus和OnBlur样式更改适用于Firefox，但不适用于IE

1 个答案: