旧それなりブログの跡地、画像やスタイルやJSなどが壊れてることがあります。

[jQuery] Firefoxのkeydown/keyup時エラーを抑止

2012年2月24日

なんのこと?

jQueryでこう書いて、Firefox&Firebug環境で実行すると・・・

$(document).bind('keydown', function(evt){});
$(document).bind('keyup', function(evt){});

キーを押すたびに、以下のようなエラー(というか注意?)が
コンソール上へ表示されると思います
keydown イベントでは charCode プロパティの値には意味がないため使用すべきではありません。
The ‘charCode’ property of a keydown event should not be used. The value is meaningless

実害はないけど出したくない

Firebugを使っていると常に出続けて邪魔なので
以下のコードをjQeury読み込み直後に書いて出ないようにしてみた

$.event.keyHooks.props = "char key keyCode".split(" ");
$.event.keyHooks.filter = function(event, original){
    // "keypress"
    if (event.type === 'keypress') {
    // jQuery original filter
        if (event.which == null) {
            event.which = original.charCode != null ? original.charCode : original.keyCode;
        }
    // "keydown", "keyup"
    } else {
        if (event.which == null) {
            // クロスブラウザ対応はここで頑張る
            event.which = event.keyCode;
        }
    }
    return event;
}

onkeydownまたはonkeyup内でevent.charCodeを参照されると先のエラーが出るので
条件分岐して、それらのイベント内では参照しないようにしている

なお、jQuery-1.7使用です

補足

コードみりゃわかると思いますが、挙動は若干変わります
keydownとkeyup時はevent.whichに代替でcharCodeを入れなくするし
また、propsから除外しているのでキーイベント全般のevent.charCodeが消えています

動作確認としては、keydown/keyup時に
制御文字以外のkeyCodeがevent.whichへ格納される点は大丈夫でした

制御文字は、クロスブラウザが凄まじく絡んでくるので追ってません
ShiftとかShift+キーとかCtrlとかを正確にとりたければ
私めは心より応援させていただきます

参考リンク

イベントのkeyCodeとcharCode
jQuery関係無しにkeypressとkeydown/keyupとcharCodeとkeyCodeの関係について
ガチで制御文字対応をするのなら参考になる

各ブラウザでキーコードを取得してみた
タイトルの通りだけどkeyCode一覧

Getting “The ‘charCode’ property of a keydown event should not be used. The value is meaningless” error in jQuery
同じ問題への解決コードがあるんだけど
charCodeやkeyCodeに0が入るのを知ってないと解読不可能なのと
条件分岐の書き方がマジプリティなので使わなかった

蛇足

この一連を解決してて、どこに問題があるのかをふと考えてみた

jQuery = which/charCode/keyCodeを意図的に混ぜてるのがわかり難くね?
 エラー出力はともかく、別変数にした方が良かったんじゃないかなぁ

Firebug = エラーレベルで出力を選べないのが不便

俺 = さっさと開発環境をChromeにすべき
 (・・・この件に全然関係ないけど、Firebugはメモリリークがひどくて、
  同じページをF5更新してくとどんどんメモリが溜まってマジプリティ)