浅谈页面中的焦点

一、前言

这篇文章主要是讲跟页面中焦点相关的东西，算是一个小的总结，目测应该没有比我更无聊的人会去写这方面东西把~

二、正文

本文希望精简一点，所以用问答形式来写把。

问题一:页面载入完成时，浏览器焦点在什么位置？

 这个问题很大程度取决于浏览器。我测试了一些浏览器发现。

1: 在Chrome中，焦点默认在body上面。

2: 在IE中，焦点应该是在浏览器上面而不是页面上。（IE不同版本之间貌似还有差别，不过我没有具体去研究）

 

那么，如果设置默认的焦点位置呢？

方法一: 通过Javascript来设置

document.getElementById("ele").focus();

这样，ID为ele的元素就会获得焦点，一个常见的需求就是让页面的一个input默认获得焦点，通过这句话就可以解决。

 

方法二: 使用HTML5定义的新属性autofocus

为元素加上autofocus属性可以让其自动获得焦点，兼容现代浏览器和IE10+

<input type="text" autofocus />

就像这样，这个input在页面载入后会自动获得焦点。

之后，焦点的位置基本取决于你鼠标点击的位置，大部分情况下会是在body或者一些表单元素上面

 

问题二:tabindex属性是干嘛的?

相信很多人看到过这个属性，但是都是一带而过。简而言之，tabindex是用来控制焦点切换顺序的。

很多时候，我们会用到焦点完全是用TAB键的时候，而tabindex属性就是决定你用tab键切换焦点时候的顺序。

举个例子

<input  value="1" type="text" tabindex="1">
<input  value="4" type="text" tabindex="4">
<input  value="2" type="text" tabindex="2">
<input  value="3" type="text" tabindex="3">

比如上面这段代码，本来你用tab键切换焦点时，是按照HTML的顺序来的。但是如果你设置了tabindex，那么焦点切换顺序将会是按照tabindex的值的大小来的。其实关于这个tabindex，司徒正美的这篇博客讲的很详细了，就不多说了。

 

问题三:如何知道当前焦点在哪个元素上?

怎么知道当前焦点在哪里呢，虽然很少情况需要知道这个，但是DOM还是提供了接口去得到这个。
那就是通过document.activeElement来实现，这个属性可以得到当前焦点的DOM元素的引用，具体可以看文档，兼容性良好。

在jQuery中，也可以通过

$("*:focus") //获得焦点的元素
$("input:focus") //获得焦点的input元素

类似这样代码去得到。

 

转载本站文章请注明作者和出处 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，请勿用于任何商业用途