面向键盘操作的半自动化解决方案

简介: 面向键盘操作的半自动化解决方案

image.png


项目地址 https://github.com/XboxYan/auto-keyboard

概要


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


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


基于HTML页面。


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


半自动化


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


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


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


image.png

然后对每块区域分别调用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/


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


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


结语


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


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

相关文章
|
存储 人工智能 架构师
ChatGPT 与软件架构 (2) - 基于 Obsidian 和 GPT 实现解决方案架构自动化
ChatGPT 与软件架构 (2) - 基于 Obsidian 和 GPT 实现解决方案架构自动化
201 0
|
1月前
|
运维 监控 安全
构建高效运维体系:从监控到自动化的全面指南在当今数字化时代,运维作为保障系统稳定性和效率的重要环节,其重要性不言而喻。本文将深入探讨如何构建一个高效的运维体系,从监控系统的搭建到自动化运维的实施,旨在为读者提供一套完整的解决方案。
本文详细介绍了高效运维体系的构建过程,包括监控系统的选择与部署、日志分析的方法、性能优化的策略以及自动化运维工具的应用。通过对这些关键环节的深入剖析,帮助运维人员提升系统的可靠性和响应速度,降低人工干预成本,实现业务的快速发展和稳定运行。
|
30天前
|
数据采集 SQL 运维
企业出海WAS安全自动化解决方案
企业出海WAS安全自动化解决方案
|
3月前
|
测试技术 开发工具 iOS开发
iOS自动化测试方案(三):WDA+iOS自动化测试解决方案
这篇文章是iOS自动化测试方案的第三部分,介绍了在没有MacOS系统条件下,如何使用WDA(WebDriverAgent)结合Python客户端库facebook-wda和tidevice工具,在Windows系统上实现iOS应用的自动化测试,包括环境准备、问题解决和扩展应用的详细步骤。
250 1
iOS自动化测试方案(三):WDA+iOS自动化测试解决方案
|
3月前
|
运维 测试技术 持续交付
解决方案 - 自动化单元测试
解决方案 - 自动化单元测试
44 1
|
4月前
|
测试技术 持续交付 微服务
现代软件测试中的自动化挑战与解决方案
在现代软件开发中,自动化测试已经成为提高效率和质量的重要手段。然而,面对不断增长和复杂化的软件项目,自动化测试也面临诸多挑战。本文探讨了当前软件测试中的自动化挑战,并提出了一些解决方案,以帮助开发团队更好地应对这些挑战,提升测试效率和质量。 【7月更文挑战第11天】
49 1
|
6月前
|
存储 运维 容灾
带你读《云上自动化运维宝典》——一文详解云上跨可用区容灾解决方案和异地多活能力建设最佳案例(3)
带你读《云上自动化运维宝典》——一文详解云上跨可用区容灾解决方案和异地多活能力建设最佳案例(3)
199 0
|
6月前
|
安全 数据管理 测试技术
网络安全与信息安全:防范漏洞、加强加密与提升安全意识深入探索自动化测试框架的设计原则与实践应用化测试解决方案。文章不仅涵盖了框架选择的标准,还详细阐述了如何根据项目需求定制测试流程,以及如何利用持续集成工具实现测试的自动触发和结果反馈。最后,文中还将讨论测试数据管理、测试用例优化及团队协作等关键问题,为读者提供全面的自动化测试框架设计与实施指南。
【5月更文挑战第27天】 在数字化时代,网络安全与信息安全已成为维护国家安全、企业利益和个人隐私的重要环节。本文旨在分享关于网络安全漏洞的识别与防范、加密技术的应用以及提升安全意识的重要性。通过对这些方面的深入探讨,我们希望能为读者提供一些实用的建议和策略,以应对日益严峻的网络安全挑战。 【5月更文挑战第27天】 在软件开发周期中,自动化测试作为保障软件质量的关键步骤,其重要性日益凸显。本文旨在剖析自动化测试框架设计的核心原则,并结合具体案例探讨其在实际应用中的执行策略。通过对比分析不同测试框架的优缺点,我们提出一套高效、可扩展且易于维护的自动
|
6月前
|
测试技术 数据安全/隐私保护 Python
【如何学习Python自动化测试】—— 鼠标键盘操作
【如何学习Python自动化测试】—— 鼠标键盘操作