キーボードイベントを処理するための Kibo Javascript ツールライブラリ_JavaScript のヒント

WBOY
リリース: 2016-05-16 18:00:15
オリジナル
1140 人が閲覧しました

はじめに
「Kibo」は何にも依存しません。これを HTML コードに挿入するだけです:

コードをコピーします コードは次のとおりです:



kibo.js
Kibo を 1 つ作成するオブジェクト インスタンスとイベント リスナーが確立されます:
コードをコピーします コードは次のとおりです:

var k = new Kibo();

Kibo オブジェクトのコンストラクターには、イベントを受け取るために指定する HTML 要素というオプションのパラメーターがあります。 input、textarea、または select を使用できます。デフォルトは window.document です。

構文と使用法
このツール ライブラリには、down と up という 2 つの単純なメソッドが用意されており、どちらも 2 つのパラメーターを受け取ります: キー、複数のキーの組み合わせ、またはワイルドカード、およびキーが一致したときに呼び出される関数です。イベントが発生します。両方のメソッドをチェーンで呼び出すことができます。

キーの組み合わせとは、制御キーと文字キーの組み合わせ、または単に 1 つ以上の制御キーを指します。配列内の単一のキーまたは複数のキーの組み合わせを両方のメソッドに渡すことができます。

関数が呼び出されると、イベントがこの関数に渡されます。イベントにアクションがない場合は、無視してください。関数が false を返した場合、イベントのデフォルトのアクションはブロックされます。

Kibo は、最後のキーボード イベントを生成したキーをクエリする lastKey メソッドを提供します。最後に押されたキーがサポートされていないキーだった場合、メソッドは未定義を返します。さらに、lastKey を使用して、特定のファンクション キーが押されたかどうかを判断することもできます。これは true または false を返します。

サポートされているキー
Kibo は次のキーをサポートしており、キー名のスペルでは大文字と小文字が区別されません:

制御キー shift、ctrl、alt

文字キーa から z まで

0 から 9 までの数字キー

f1 から f12 までのファンクションキー

方向キー 左、上、右、下

Enter 、esc、space、backspace、delete、insert、tab、page_up、page_down、home、end、caps_lock、num_lock

ワイルドカード、任意、任意の矢印、任意の数字、任意の文字、任意の f


var k = new Kibo();

単一または複数のキーの組み合わせ
コードをコピーコードは次のとおりです。

k.down(['up', 'down'], function() {
console.log('上下矢印キーが押されました');
}).up('tab', function() {
console.log('TAB キーが解放されました');
});

制御キーを含むキーの組み合わせ
コードをコピー コードは次のとおりです。

function handler() {
console .log(' 最後のキー: ' k.lastKey());
}

k.down(['shift q', 'ctrl alt x'],
ワイルドカード

コードをコピー コードは次のとおりです。
k.down( ['任意の文字', ' 任意の数字'], function() {
console.log('文字または数字キーが押されました');
console.log('シフトキーはありました' (k.lastKey('シフト') ? ' ' ') ' が押されました');

k.up('any', function() {
console.log('キーが解放されました) ');
} );


デフォルトのイベントをブロック


コードをコピーします k.down('f5', function() { return false; });
ライセンス
Kibo は MIT ライセンスに基づいてリリースされています。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート