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

baukh789 發布于2019-08-23 15:34 / 2091人閱讀

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

項目地址 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 鍵盤操作快捷鍵

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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