键盘操作半自动解决方案

时间：2023-04-02 23:07:26 HTML

项目地址https://github.com/XboxYan/auto-keyboard概要这是一个半自动键盘操作的解决方案，主要适用于需要全键盘操作的场景，比如大屏显示、电视、游戏菜单等，大大简化了按键操作的逻辑。焦点使用虚拟焦点，即通过添加.focus等类来实现，而不是原生的:focus，更有利于自定义需求。基于HTML页面。比较冷门，键盘交互方向，不感兴趣可以跳过。由于半自动化的实际场景复杂多样，过于全面会使业务代码更加复杂。该功能插件仅针对部分自动化，整体页面布局仍需开发者手动协调。具体来说，需要开发者手动将页面划分为几个逻辑区域，比如下面的键盘区域和搜索列表区域。然后分别为每个区域调用newView()AB...

破译人类DNA代码

...varS=$('search');varL=$('list');varV=newView(S);varVl=newView(L);V.init(S.getElementsByTagName('a'));Vl.init(L.getElementsByTagName('li'));V.onfocus();这样，每个区域的按键都自动适配了。在API通过newView(#container)适配的区域内，可聚焦元素可以是普通的n*m分布，也可以是任何绝对定位的布局。使用V.init(children)初始化可用的焦点子元素，传入nodeList即可，与页面层级无关。新的视图（容器）核心方法。创建区域，传入参数为页面的容器。varcon=document.getElemetById('con');varV=newView(con);V.init(nodeList)初始化，传入的参数是需要聚焦的子元素，通常使用getElementsByTagName传入多个。该方法需要在页面完全加载后使用，即动态加载网络数据时，需要等待只有元素添加到容器中，然后调用V.init(S.getElementsByTagName('a'));//动态数据ajax({url:'XXX',success:function(data){varhtml='';for(vari=0;i'+data[i]+'';}S.innerHTML=html;V.init(S.getElementsByTagName('a'));}})可以为空。这时候就说明这个区域没有可聚焦的元素，常见的场景就是新闻。这时候这个区域就可以自动实现上下浏览的功能了。V.insertAfter(nodeList)向后追加子元素。常见场景有上拉加载、追加下一页等功能。ajax({url:'XXX',success:function(data){varhtml='';for(vari=0;i'+data[i]+'';}M.innerHTML=html;V.insertAfter(M.getElementsByTagName('a'));}})V.insertBefore(nodeList)与insertAfter相反，向前添加子元素。v.onfocus()主动焦点，当有多个区域时，可以选择控制。varV=newView(S);V.onfocus();Calback这部分是对按钮V.ok回车确认的回调。vi.ok=function(item){console.log(item)//当前获得焦点的元素的dom节点}当按下OK时，pressIn类将添加到当前获得焦点的元素中，抬起时移除，可以自定义按效果。V.left，V.right，V.up，V.down左/右/上/下（在边界时）。当焦点元素位于区域边界时触发。一般用于跨区域。vl.left=function(){V.onfocus();//此时Vl会自动失去焦点，V会主动获取焦点}处于边界时，如果没有指定触发回调，比如V.left，它会给当前获取的焦点元素添加摇动类，这是一个摇动动画，300ms后自动移除。五、退货。按下返回键时触发。V.move移动时触发，回调参数为移动前的元素和移动后的元素。V.move=function(prev,current){//beforeprevmoves//beforeandaftercurrentmoves}propsV.saveCurrent是否保留当前状态，类名是current。一般用于tab切换时跟随。默认为假。V.saveCurrentDelay是否保留当前状态，类名是current。一般用于切换tab时跟随，但需要点击ok触发。默认为假。V.scrollAnimate是否启用滚动动画。此功能是使用smoothscroll.js完成的，如果不支持该插件，则可以禁用滚动动画。案例https://web.codelabo.cn/auto-keyboard/请使用键盘方向键体验上下左右查看源码。代码量非常小。确实比较窄，或者说比较冷门，希望能帮助到特定人群。欢迎对这方面感兴趣的朋友一起交流讨论。

上一篇：说说面试中的一些坑

下一篇：SublimeText3前端常用插件

键盘操作半自动解决方案相关文章