任意元素的focus伪类

w3school中国上可以查看到这么一句话:
定义和用法 :focus 伪类在元素获得焦点时向元素添加特殊的样式。 注释:IE 浏览器不支持此属性。 说明 这个伪类应用于有焦点的元素。例如 HTML 中一个有文本输入焦点的输入框,其中出现了文本输入光标;也就是说,在用户开始键入时,文本会输入到这个输入框。其他元素(如超链接)也可以有焦点,不过 CSS 没有定义哪些元素可以有焦点。
不是所有的元素都具有:focus伪类,使得:focus伪类没有:hover :active等常用,但我们知道对于设定了id的元素是使用锚是可以使任意元素获得焦点的.这就给我们以启示,其实任意元素都具有:focus伪类的,只是没有触发。通过仔细观察发现,能触发的元素,如textarea、input的共同特点是有这样的css设置:user-modify:read-write,即为可编辑状态,在chrome的开发人员工具下可以发现-webkit-user-modify: read-write;当然对不同浏览器有不同的前缀。因而我们可以通过user-modify来中介是任意元素获得焦点。如下面例子:
可使用focus伪类的div
测试通过:chromium 14; firefox 7.01有-moz-user-modify但似乎还没作用,需要设置dom属性contenteditable="true"才能成功,不过根据mdn来看,应该是还没完善此属性的解析。 opera君的步伐还是需要加强,ie君支持contenteditable,但其user-modify还没测试~
posted @ 2011-10-16 23:53  Defims  阅读(505)  评论(0编辑  收藏  举报