博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
面向键盘操作的半自动化解决方案
阅读量:6449 次
发布时间:2019-06-23

本文共 2328 字,大约阅读时间需要 7 分钟。

clipboard.png

项目地址

概要

这是一个半自动化的键盘访问解决方案,主要适用于需要完全键盘操作场景,比如大屏展示,电视,游戏菜单等,大大简化按键操作的逻辑。

焦点使用虚拟焦点,也就是通过添加.focus等class实现,而不是原生自带的:focus,更利于定制化需求。

基于HTML页面。

比较冷门,键盘交互方向,不感兴趣的可以跳过。

半自动化

由于实际场景复杂多样,过于全反而会让业务代码更繁杂。

该功能插件仅针对于局部实现自动化操作,整体页面布局仍需开发者手动协调。

具体是指开发者需要手动讲页面分为几块逻辑区域,比如下方的键盘区和搜索列表区。

clipboard.png

然后对每块区域分别调用new View()即可

  • 人类DNA密码破译

  • ...
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
'; } S.innerHTML = html; V.init(S.getElementsByTagName('a')); }})

可以传空。此时表示该区域里面没有可获焦元素,常见场景为新闻类,此时该区域可以自动实现上下浏览的功能。

V.insertAfter(nodeList)

向后追加子元素。常见场景为上拉加载,追加下一页等功能。

ajax({    url:'XXX',    sunccess:function(data){        var html = '';        for(var i=0;i
'; } 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完成,如果不支持该插件,可禁用滚动动画。

案例

请使用键盘方向键上下左右体验

可以查看源码,代码量很小

结语

目前市面上并没有什么对键盘操作封装的库,键盘什么的这个方向确实比较窄,或者说比较冷门,希望能够帮助特定的人群吧。

有这方面兴趣的欢迎交流,一起讨论。

转载地址:http://tqlwo.baihongyu.com/

你可能感兴趣的文章
JavaScript小结
查看>>
python Web开发你要理解的WSGI & uwsgi详解
查看>>
基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境
查看>>
SQL语言:DDL/DML/DQL/DCL
查看>>
swift代理使用
查看>>
代数几何
查看>>
大牛网站
查看>>
Ajax传数据到servlet
查看>>
springMVC和struts2有什么不同?为什么要用springMVC或者struts2?让你实现一个MVC框架大概如何设计?...
查看>>
微信JSApi支付~坑和如何填坑
查看>>
使用 iview Table 表格组件修改操作的显示隐藏
查看>>
招银网络科技笔试题
查看>>
onTouch和onTouchEvent
查看>>
八进制转十进制
查看>>
mssqll2008下只显示相关的登陆操作
查看>>
网站物理路径查找思路
查看>>
App引流增长技术:Deeplink(深度链接)技术
查看>>
赠云风大侠
查看>>
thinkphp留言板开发笔记 1 - 新的
查看>>
DEDECMS中,引入文件
查看>>