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

baukh789 发布于2019-08-23 15:34 / 2090人阅读

摘要：项目地址概要这是一个半自动化的键盘访问解决方案，主要适用于需要完全键盘操作场景，比如大屏展示，电视，游戏菜单等，大大简化按键操作的逻辑。半自动化由于实际场景复杂多样，过于全反而会让业务代码更繁杂。这一部分是对按键的回调回车确定。

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

概要

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

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

基于HTML页面。

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

半自动化

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

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

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

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


    A
    B
    ...


    
        
        人类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完成，如果不支持该插件，可禁用滚动动画。

案例

https://web.codelabo.cn/auto-keyboard/

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

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

结语

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

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

云服务器 GPU云服务器键盘操作键盘操作优势键盘操作焦点html 键盘操作快捷键

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102250.html

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

摘要：项目地址概要这是一个半自动化的键盘访问解决方案，主要适用于需要完全键盘操作场景，比如大屏展示，电视，游戏菜单等，大大简化按键操作的逻辑。半自动化由于实际场景复杂多样，过于全反而会让业务代码更繁杂。这一部分是对按键的回调回车确定。 showImg(https://segmentfault.com/img/bVbo8qV?w=683&h=176); 项目地址 https://github....

CloudwiseAPM 2019-08-02 14:22 评论0 收藏0
Laravel中的核心概念

摘要：可以为服务提供者的方法设置类型提示。方法将在所有其他服务提供者均已注册之后调用。所有服务提供者都在配置文件中注册。可以选择推迟服务提供者的注册，直到真正需要注册绑定时，这样可以提供应用程序的性能。本文最早发布于 Rootrl的Blog 导言 Laravel是一款先进的现代化框架，里面有一些概念非常重要。在上手Laravel之前，我认为先弄懂这些概念是很有必要的。你甚至需要重温下PHP...

ddongjian0000 2019-07-01 10:07 评论0 收藏0
面向对象接口多态

摘要：多态的前提是必须有子父类关系或者类实现接口关系，否则无法完成多态。具体格式如下父类引用指向子类对象就是多态的定义格式。多态的转型分为向上转型与向下转型两种向上转型当有子类对象赋值给一个父类引用时，便是向上转型，多态本身就是向上转型的过程。第3天面向对象今日内容介绍 接口 多态 笔记本案例今日学习目标 写出定义接口的格式 写出实现接口的格式...

wangdai 2019-08-16 14:41 评论0 收藏0
Python理解面向对象

摘要：面向对象编程，简称，是一种程序设计思想。面向过程与面向对象面向过程的程序设计把函数作为程序的基本单元。以上是在计算机世界里认识面向对象和面向过程，接下来给大家举个生活中的例子就拿你早上想吃鸡蛋灌饼为例。面向对象编程——Object Oriented Programming，简称OOP，是一种程序设计思想。OOP把对象作为程序的基本单元，一个对象包含了数据和操作数据的函数。面向过程 ...

hatlonely 2019-07-30 15:20 评论0 收藏0
基于 jQuery 的键盘事件监听控件

摘要：最近项目里要做一个画板，需要对键盘事件进行监听，来进行诸如撤回重做移动缩放等快捷键操作，因此顺手实现了一个键盘事件监听控件，略有收获，整理出来，希望对大家有所帮助，更希望能获得高手的指点。最近项目里要做一个画板，需要对键盘事件进行监听，来进行诸如撤回、重做、移动、缩放等快捷键操作，因此顺手实现了一个键盘事件监听控件，略有收获，整理出来，希望对大家有所帮助，更希望能获得高手的指点。 1...

付伦 2019-08-23 16:44 评论0 收藏0