首页 > 技术文章 > 文本框获得焦点时改变背景颜色

liubeimeng 2016-09-21 16:51 原文

文本框或者文本域获得焦点时改变背景颜色和边框.时区焦点时还原最初状态.这样做可以极大地提高用户体验,使用户的操作可以可到及时的反馈.

我先是想到使用CSS实现,

input:focus,textarea:focus{
    border:1px solid #f99;
    background-color:navajowhite;
}

貌似实现了,经过测试:发现低版本的IE不支持.我比较喜欢做IE兼容,就是查了很多资料.

发现IE6并不支持除了超链接元素(hover)之外的伪类选择器.

于是想到可以使用jQuery的focus来试试,

1 $(":input").focus(function () {
2     $(this).addClass("focus");
3 }).blur(function () {
4     $(this).removeClass("focus");
5 });

在低版本IE测试可以运行.

推荐阅读