1月19日の技術勉強会

g:hatena:id:hatenatech

1月19日の技術勉強会

1月19日に行われました技術発表会の内容を撮影した動画ファイルを公開いたしました。内容は以下のとおりです。

テーマ KeyTypeListener.js 勉強会
発表者 d:id:secondlife

動画・音声ファイル

以下の再生画面より、勉強会の動画・音声をご覧いただけます。

動画

また以下のリンクから、高画質版のファイルをダウンロードの後にご覧いただくことも可能です。(ビデオiPodでもご覧いただけます。)

070119keytipelistner.mp4

音声

Download

KeyTypeListener.js

http://hatelabo.jp/js/KeyTypeListener.js

タイプされたキーに対するアクションを行う Observer 的なライブラリ

どんなときに便利なの？

じゃあいらなくない？でも

  • 削除したい
  • 特定の要素のみにキーマッピングりたい
  • 特定の要素は無視したい
    • input type='text' な要素とか…
  • チェインで繋げたい/チェインを解除したい
  • ctrl とか alt とかを楽に扱いたい

デモ

http://rails2u.com/misc/key_event_listener.html

addKeybind('a', function(ev) { log('a')});
addKeybind('a', function(ev) { log('a!!');}, $('loglog'));
addKeybind('B', function(ev) { log('B')});
addKeybind('B', function(ev) { log('B!!');  return false;}, $('loglog'));
addKeybind('ctrl-x', function(ev) { log('!!!!!!!!!')});
addKeybind('ctrl-alt-o', function() { log('????????') });

cancelKeybind($('cancel'));

var cfunc = addKeybind('c', function(ev) { log('c')});
var cfunc2 = addKeybind('c', function(ev) { log('c2')});
removeKeybind('c', cfunc);

関数一覧

addKeybind(key, func[, element = document])

指定したキーが押されたときの関数を追加します。element を指定しなかった場合は document に connect されます。追加した関数が返ります。

追加した関数は、false を返す、もしくは例外 KeyTypeListener.StopKeyChain を発生させない限り連鎖します。

addKeybind('a', function(ev) {}); // 実行される
addKeybind('a', function(ev) { return false;}); // 実行される
addKeybind('a', function(ev) {}); // 前回 false が返ったので、実行されない
removeKeybind(key, func[, element = document])

指定したキー、関数を削除します。

var cfunc = addKeybind('c', function(ev) { alert('c')});
var cfunc2 = addKeybind('c', function(ev) { alert('c2')});
removeKeybind('c', cfunc);
// c を押すと alert('c2') だけ実行される
removeKeybindAll(key[, element = document])

指定したキーに指定してある関数すべてを削除します

cancelKeybind(element)

指定した要素でキーが叩かれても無視します

getBoundKeybindFunctions(key[, element = document])

指定したキーにひも付いている関数全部を取得します

その他

  • opera では ctrl/alt を組み合わせることができません。だれか patch ＞＜

作った人

はてなスタッフ