H5在大屏项目遇到的焦点问题

H5在大屏项目遇到的焦点问题

刚完成一个大屏项目，用H5写大屏项目也是大姑娘坐轿–头一次，总结下H5在写大屏项目所遇到的坑和爬坑经历：大屏项目需要注意的基本问题，一般不建议现有流行框架，最好使用原生代码编辑，大屏的机顶盒一般都是使用很久的，现有框架很可能会出现兼容性问题，大屏项目是在机顶盒上的安卓系统下运行，需要安卓人员用webview把H5代码封壳包起来，个人大屏项目使用原生+jquery库实现，没有使用其他框架，项目中遇到最大的坑就是焦点问题。

一 tabindex

处理大屏焦点问题就不得不提tabindex属性了，一个处理焦点问题的神器。tabindex属性是一个“全局属性”，就是所有HTML标签都可以用的属性，tabindex属性是一个非常老的属性，浏览器支持多年，基本特性没有兼容性问题，大屏中div标签是不能获取焦点的，需要为其添加属性tabindex以使其能够获取焦点。

tabindex表示的意思就是“元素使用Tab键进行focus时候的顺序值”，因此，理论上，tabindex属性值只能是数值。但是实际的表现却有差异，在Firefox浏览器下，tabindex属性值缺省，或者属性值非数值，例如tabindex=“xxx”，其行为表现等同于设置了tabindex="-1"，而IE和Chrome则忽略该属性。

tabindex支持正值和负值，但是对负值而言，没有任何理由使用-1以外的其它属性值。这并不是说其它负值就不起作用，，作用还是有的，只是没有意义，为什么这么说呢？

当一个元素设置tabindex属性值为-1的时候，元素会变得focusable，所谓focusable指的是元素可以被鼠标或者JS focus，在Chrome浏览器下表现为会有outline发光效果，IE浏览器下是虚框，同时能够响应focus事件。但是，却不能被键盘focus。

这种鼠标可以focus，但是键盘却不能focus的状态，只要tabindex属性值为负值，因此，tabindex="-2"和tabindex="-1"没有任何本质区别，既然如此，那就没有必要冒险在玩类似tabindex="-2"的新花样，万一哪天浏览器认为这种用法是不合法的呢？

tabindex=“1”
tabindex属性的键盘索引顺序其实是从数值1开始的，不是0，1索引顺序是最靠前的。也就是说哪怕你在页面的最底部、文档流的最后一个元素设置了tabindex=“1”，当按下Tab键的时候，首先focus就是这最后一个元素。

tabindex=“0”
元素设置tabindex="-1"，可以鼠标和JS可以focus，但键盘不能focus；tabindex=“0"和tabindex=”-1"的唯一区别就是键盘也能focus，索引的顺序没有任何的变化。

二 focus

dom元素在设置tabindex属性后，在需要dom获取焦点的函数中dom.focus() 使其获取焦点。

三 outline

在dom获取焦点后，dom会显示边框（大屏中存在，pc端没有），使用outline：none；去除边框。