面向鍵盤操作的半自動化解決方案

CloudwiseAPM 發(fā)布于2019-08-02 14:22 / 1328人閱讀

摘要：項目地址概要這是一個半自動化的鍵盤訪問解決方案，主要適用于需要完全鍵盤操作場景，比如大屏展示，電視，游戲菜單等，大大簡化按鍵操作的邏輯。半自動化由于實際場景復(fù)雜多樣，過于全反而會讓業(yè)務(wù)代碼更繁雜。這一部分是對按鍵的回調(diào)回車確定。

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

概要

這是一個半自動化的鍵盤訪問解決方案，主要適用于需要完全鍵盤操作場景，比如大屏展示，電視，游戲菜單等，大大簡化按鍵操作的邏輯。

焦點使用虛擬焦點，也就是通過添加.focus等class實現(xiàn)，而不是原生自帶的:focus，更利于定制化需求。

基于HTML頁面。

比較冷門，鍵盤交互方向，不感興趣的可以跳過。

半自動化

由于實際場景復(fù)雜多樣，過于全反而會讓業(yè)務(wù)代碼更繁雜。

該功能插件僅針對于局部實現(xiàn)自動化操作，整體頁面布局仍需開發(fā)者手動協(xié)調(diào)。

具體是指開發(fā)者需要手動講頁面分為幾塊邏輯區(qū)域，比如下方的鍵盤區(qū)和搜索列表區(qū)。

然后對每塊區(qū)域分別調(diào)用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();

這樣，每塊區(qū)域的按鍵都已經(jīng)自動適配了。

API

通過new View(#container)適配的區(qū)域，可獲焦元素可以是常見的n*m分布，也可以是絕對定位的任意布局。

通過V.init(children)來初始化可獲焦子元素，傳入nodeList即可，與頁面層級無關(guān)。

new View(container)

核心方法。創(chuàng)建一個區(qū)域，傳入?yún)?shù)為頁面的一個容器。

var con = document.getElemetById("con");
var V = new View(con);

V.init(nodeList)

初始化，傳入?yún)?shù)為需要獲焦的子元素，通常使用getElementsByTagName來一次性傳入多個。

該方法需要等待頁面加載完全后使用，也就是說當動態(tài)加載網(wǎng)絡(luò)數(shù)據(jù)時，需等待只元素加入容器之后調(diào)用

V.init(S.getElementsByTagName("a"));

//動態(tài)數(shù)據(jù)
ajax({
    url:"XXX",
    sunccess:function(data){
        var html = "";
        for(var i=0;i";
        }
        S.innerHTML = html;
        V.init(S.getElementsByTagName("a"));
    }
})

可以傳空。此時表示該區(qū)域里面沒有可獲焦元素，常見場景為新聞類，此時該區(qū)域可以自動實現(xiàn)上下瀏覽的功能。

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()

主動聚焦，當有多個區(qū)域時，可選擇控制。

var V = new View(S);
V.onfocus();

Calback

這一部分是對按鍵的回調(diào)

V.ok

回車、確定。

Vi.ok = function(item){
    console.log(item)//當前獲焦元素的dom節(jié)點
}

當按下確定時，會給當前獲焦元素添加pressIn類，抬起時移除，可自定義按下效果。

V.left、V.right、V.up、V.down

向左/右/上/下（處于邊界時）。當獲焦元素處于區(qū)域邊界時觸發(fā)。一般用于跨越區(qū)域。

Vl.left = function(){
    V.onfocus();//此時Vl會自動失去焦點，V會主動獲焦
}

當處于邊界時，如果沒有指定觸發(fā)回調(diào)，比如V.left，會給當前獲焦元素添加shake類，這是一個顫抖動畫，300ms自動移除。

V.back

返回。當按返回鍵時觸發(fā)。

V.move

移動時觸發(fā)，回調(diào)參數(shù)為移動之前的元素，和移動之后的元素。

V.move = function (prev, current) {
    //prev移動之前
    //current移動之前后
}

props V.saveCurrent

是否保留當前狀態(tài)，類名為current。一般用作tab切換時跟隨。默認為false。

V.saveCurrentDelay

是否保留當前狀態(tài)，類名為current。一般用作tab切換時跟隨，但是需要點擊ok觸發(fā)。默認為false。

V.scrollAnimate

是否啟用滾動動畫。該功能使用smoothscroll.js完成，如果不支持該插件，可禁用滾動動畫。

案例

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

請使用鍵盤方向鍵上下左右體驗

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

結(jié)語

目前市面上并沒有什么對鍵盤操作封裝的庫，鍵盤什么的這個方向確實比較窄，或者說比較冷門，希望能夠幫助特定的人群吧。

有這方面興趣的歡迎交流，一起討論。

云服務(wù)器 GPU云服務(wù)器鍵盤操作鍵盤操作優(yōu)勢鍵盤操作焦點html 鍵盤操作快捷鍵

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53762.html

發(fā)表評論

登陸后可評論

0條評論

CloudwiseAPM

男|高級講師

我要關(guān)注我要私信

TA的文章

為什么安全是Java開發(fā)人員的首要任務(wù)?

閱讀 664·2021-11-15 11:39
上海-蘇錫常先進智能制造實踐技術(shù)淺析一二-立哥技術(shù)

閱讀 2901·2021-10-08 10:04
重學(xué)前端學(xué)習(xí)筆記（二十一）--如何選中svg里的a元素？

閱讀 3265·2019-08-30 10:57
事件循環(huán)機制

閱讀 3025·2019-08-26 13:25
TypeScript 3.0 + React + Redux 最佳實踐

閱讀 1908·2019-08-26 12:14
H5小游戲【篇一】組詞游戲

閱讀 2636·2019-08-23 15:27
通過手機物理返回鍵實現(xiàn)彈出層的隱藏

閱讀 2996·2019-08-23 15:18
js設(shè)計模式--單例模式

閱讀 1777·2019-08-23 14:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

面向鍵盤操作的半自動化解決方案

人類DNA密碼破譯

相關(guān)文章