Clever Geek Handbook

少し練習：jQueryホットキー

まえがき





ここでは、ネットワークの進化、サイトからサービスおよびWebアプリケーションへのスムーズな移行については説明しません。また、他の同様の結論についても言及します。

代わりに、この情報が（少なくとも一般的な考え方に関して）誰かに本当に役立つことを心から願って、私の開発の1つを共有しようとします。



JSフレームワークが「ホットキーを特定のボタンに掛ける」タスクを簡単ではないにしても非常に簡単にするのは秘密ではありません。 また、機能要素への「ホットキー」のバインドを単純化および自動化するタスクでさえ、非常に簡単に解決されます。







まず、ホットキーを使用することの客観的な難しさと制限について説明します。



理論



  1. 「ホットキー」はブラウザによって占有されています

    はい、ユーザーにとって便利で使い慣れた「ホットキー」のほとんどはブラウザに占有されています。 そして、これはまだ問題の半分であり、問​​題は異なるブラウザーで忙しいことです！ 例えば、長いリストのページ間をナビゲートするために、任意の修飾子とともにナビゲーションキー（「矢印」）を使用すると素晴らしいでしょう。 「何かと」は良いのですが、どれと？ Alt-left / Alt-rightはFFとIEで使用され、Ctrl-left / Ctrl-right-オペラでは、これらの方法の両方-Safariではブラウザ内の戻る/進むナビゲーションのために、技術的にこの機能をブロックすることができたとしても-非常に悪い考えです これは単なる例であり、「便利で馴染みのある」ホットキーのほとんどすべてがすでに使用されています。そうでなければ、おそらく、それらは馴染みがなく、（結果として）便利ではありません。 この事実は、サイトの使用に大きな制限を課しているため、厳選して選択する必要があります。

  2. ホットキーは何か他のもので忙しい

    たとえば、オペレーティングシステムによって占有されている「ホットキー」についても、同じことが当てはまります。 たとえば、入力フィールドでは、同じCtrl-left / Ctrl-rightは異なることを意味しますが、ユーザーにとっては便利で使い慣れています。 ユーザーがinput / textareaでCtrl-leftを押して、結果として彼が考えていたものではない何かを得た例は、それ自体を示唆しています。

  3. 修飾子は、一般的に言えば、異なります

    Ctrl、Alt、およびShiftがPCキーボードにあります。 しかし、PC以外にも、たとえばMacなどがあります。 「ホットキー」を正しく実装するには、他のプラットフォームで利用可能な修飾子、それらが配置されている場所、およびそれらがどのように異なるかを少なくとも一般的な用語で知る必要があります...しかし、理想的には、もちろん、物理的にではなく、見て、触れて、突いて、誰もがそのような機会を持っています。


結論として、これはすべて-単なる困難であり、乗り越えられない障害ではないことに注意してください。



練習する



アイデア



それは簡単です：キーのシンボリック表記を決定し、キーのシンボルと名前が一致するアクティブな要素に追加のクラスを割り当てます。ボタンをクリックすると、押されたボタンのシンボルと名前が一致するクラスを持つアクティブな要素があるかどうかを確認します。 存在する場合、見つかったアクティブな要素をアクティブにします。



実装



最初の2つのサブタスクは、私の観点からは些細なものであり、詳細な検討は必要ありません。 3番目について説明します。



ボタンのクリックをキャッチ（簡単）：



$(document).keydown(CheckKeyDown);







次に、「ユーザーが快適にテキストを入力することを気にしないでください」という問題を何らかの形で集中的に解決します。 「フォーカスされた」要素が入力フィールドである場合、「ホットキー」をオフにするために、現在フォーカスされている要素を判別する方法を見つけました（しかし、見つかりませんでした）。 最終的に、「ホットキー」をブロックするグローバル変数を回避することにしました。

hotkeysDisabled = false;

$('input, textarea').focus(function(){hotkeysDisabled=true;}).blur(function(){hotkeysDisabled=false});

function CheckKeyDown(e) {

if(hotkeysDisabled)

return true;

...







誰かがより良い、よりエレガントな方法を知っているなら-有益なコメントに感謝します。



押されたキーのシンボルを識別する時です。 オプション「番号をそのままにする」はすぐに拒否されました-ctrl_13という形式の記号指定を使用したり、夜間に覚えておく必要がないため、alt_219は非常に不便です。 String.fromCharCode（）のみを使用することも不可欠です。非常に頻繁に生成されるため、クラスに割り当てることができません。 私は他の通常の手段を見つけられなかったので、この種の大きくてugいデザインを作りました。

function keyCodeString(e)

{

var keyCodeStrings = {

8: 'backspace',

9: 'tab',

...

222: 'quote'

}

...

s = '';

if(e.ctrlKey) s = s + 'ctrl_';

if(e.altKey) s = s + 'alt_';

return s + keyCodeStrings[e.keyCode];

}







優雅さの欠如にもかかわらず、この設計には否定できない利点があります-それは適切に機能します。 いずれにせよ、実験室で。



最後の手順は残ります-見つかった場合、見つかったものをアクティブにします。 明らかに十分ですが、それでも説明します...



リンクをたどってください：

var keyCode = keyCodeString(e);

var selector='a.'+keyCode;

if($(selector).size() > 0)

{

location.href=$(selector).attr('href'); // your favorite load/go method

return false;

}









入力フィールドのアクティブ化/ボタンを押す：

$('.'+keyCode+':input').focus().click();









それがおそらくすべてです。



あとがき



ここでコード全体を見ることができます 。

このトピックを完全に公開するふりをするつもりはありません。さまざまな調整、追加、 建設的な批判を歓迎します。 このルールは、トピックのどの部分にも適用できます：「より良い方法を知っているなら、それについて教えてください。」 ご清聴ありがとうございました。



More articles:


All Articles