项目地点 https://github.com/XboxYan/auto-keyboard
提要
这是一个半自动化的键盘接见解决方案，重要适用于须要完整键盘操纵场景，比方大屏展现，电视，游戏菜单等，大大简化按键操纵的逻辑。
中心运用假造中心，也就是经由过程增加.focus等class完成，而不是原生自带的:focus，更利于定制化需求。
基于HTML页面。
比较冷门，键盘交互方向，不感兴致的可以跳过。
半自动化
因为现实场景庞杂多样，过于全反而会让营业代码更冗杂。
该功用插件仅针对于部份完成自动化操纵，团体页面规划仍需开发者手动谐和。
详细是指开发者须要手动讲页面分为几块逻辑地区，比方下方的键盘区和搜刮列表区。
然后对每块地区离别挪用new View()即可
<div class="search_keyborad" id="search">
<a data-key="A">A</a>
<a data-key="B">B</a>
...
</div>
<ul class="search_list" id="list">
<li class="search_item">
<img src="" >
<h3>人类DNA暗码破译</h3>
</li>
...
</ul>
<script type="text/javascript" src="./js/smoothscroll.min.js"></script>
<script type="text/javascript" src="./js/base.js"></script>
<script type="text/javascript" src="./js/view.js"></script>var S = $('search');
var L = $('list');
var V = new View(S);
var Vl = new View(L);
V.init(S.getElementsByTagName('a'));
Vl.init(L.getElementsByTagName('li'));
V.onfocus();如许，每块地区的按键都已自动适配了。
API
经由过程new View(#container)适配的地区，可获焦元素可以是罕见的n*m散布，也可以是相对定位的恣意规划。
经由过程V.init(children)来初始化可获焦子元素，传入nodeList即可，与页面层级无关。
new View(container)
中心要领。建立一个地区，传入参数为页面的一个容器。
var con = document.getElemetById('con');
var V = new View(con);V.init(nodeList)
初始化，传入参数为须要获焦的子元素，平常运用getElementsByTagName来一次性传入多个。
该要领须要守候页面加载完整后运用，也就是说当动态加载收集数据时，需守候只元素到场容器以后挪用
V.init(S.getElementsByTagName('a'));
//动态数据
ajax({
url:'XXX',
sunccess:function(data){
var html = '';
for(var i=0;i<data.length;i++){
html+='<a>'+data[i]+'</a>';
}
S.innerHTML = html;
V.init(S.getElementsByTagName('a'));
}
})可以传空。此时示意该地区内里没有可获焦元素，罕见场景为消息类，此时该地区可以自动完成高低阅读的功用。
V.insertAfter(nodeList)
向后追加子元素。罕见场景为上拉加载，追加下一页等功用。
ajax({
url:'XXX',
sunccess:function(data){
var html = '';
for(var i=0;i<data.length;i++){
html+='<a>'+data[i]+'</a>';
}
M.innerHTML = html;
V.insertAfter(M.getElementsByTagName('a'));
}
})V.insertBefore(nodeList)
与insertAfter相反，向前追加子元素。
V.onfocus()
主动聚焦，当有多个地区时，可选择掌握。
var V = new View(S);
V.onfocus();Calback
这一部份是对按键的回调
V.ok
回车、肯定。
Vi.ok = function(item){
console.log(item)//当前获焦元素的dom节点
}当按下肯定时，会给当前获焦元素增加pressIn类，抬起时移除，可自定义按下结果。
V.left、V.right、V.up、V.down
向左/右/上/下（处于边境时）。当获焦元素处于地区边境时触发。平常用于逾越地区。
Vl.left = function(){
V.onfocus();//此时Vl会自动落空中心，V会主动获焦
}当处于边境时，假如没有指定触发还调，比方V.left，会给当前获焦元素增加shake类，这是一个发抖动画，300ms自动移除。
V.back
返回。当按返回键时触发。
V.move
挪动时触发，回调参数为挪动之前的元素，和挪动以后的元素。
V.move = function (prev, current) {
//prev挪动之前
//current挪动之前后
}props
V.saveCurrent
是不是保存当前状况，类名为current。平常用作tab切换时追随。默以为false。
V.saveCurrentDelay
是不是保存当前状况，类名为current。平常用作tab切换时追随，然则须要点击ok触发。默以为false。
V.scrollAnimate
是不是启用转动动画。该功用运用smoothscroll.js完成，假如不支持该插件，可禁用转动动画。
案例
https://web.codelabo.cn/auto-keyboard/
请运用键盘方向键高低左右体验
可以检察源码，代码量很小
结语
现在市面上并没有什么对键盘操纵封装的库，键盘什么的这个方向确切比较窄，或者说比较冷门，愿望可以协助特定的人群吧。
有这方面兴致的迎接交换，一同议论。
