QA@IT

keydownからkeyupの処理を実行させないように制御したい。

4497 PV

現在、CromeでjQueryやjavascriptを使ってシステムを開発しているのですが、わからないことがあり質問させていただきます。

現在、textareaに対して、keydownの時と、keyupの時にbindをかけてメソッドを実行するようにしています。
そのなかでkeydownの時に、特定のキーが押されたときに、keyupの処理を発生させないというプログラムを書きたいのです。

具体的にソースで説明させていただくと、

textarea_element.bind("keyup",this.keyup);
textarea_element.bind("keydown",this.keydown);
  keydown: function(e){
     if(Enterが押されたら){
          //keyupを発生させない処理
     }
  },

  keyup: function(e) {
  },

こんな感じです。上記のソースでいうところの「//keyupを発生させない処理」をどうかけばいいかわかりません。
ためしにevent.returnValue = false;を書いてみたのですが、効果はないようです。

一応、グローバル変数にフラグをたてて制御するという方法や、一時的にbindを解いてまた結び直す、みたいな方法も無くはないと思いますが、もう少しスマートな方法は無いかと思い質問させていただきました。

ご回答お待ちしております。

回答

keyupで迂回させるのが王道だとは思いますが、ほかの処理によって付加されたイベントなどに対応できないという問題はあります。

Chrome+jQuery1.8以降では以下のようにすれば一応インラインに書かれたものもbindしたものも処理させないことが実現できそうですが、あまり検証していないので参考までに(内容的には一時的なbindの解除です)。
イベントものはタイミングなどでハマりがちなので泥臭くてもkeyupで処理した方がいいだろうとは思います。
jQueryはHTML5のdata属性の絡みでjQuery.fn.dataなどに変更が入った時期があるため、1.8より前バージョンでは確認して使用してください。

あと関係ないですが、CromeではなくChromeです。

<html>
<head>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var textarea_element = $("#textarea");
    textarea_element.bind("keyup", keyup);
    textarea_element.bind("keydown", keydown);
});

function keydown(e){
    if(e.keyCode==13){
        var orgkeyup=e.currentTarget.onkeyup;
        var orgevents = $._data(e.currentTarget, "events").keyup;
        $._data(e.currentTarget, "events").keyup = null;
        e.currentTarget.onkeyup = function(e){
            e.currentTarget.onkeyup = orgkeyup;
            $._data(e.currentTarget, "events").keyup = orgevents;
            return false;
        }
    }
}

function keyup(e){
    console.log("keyup binded");
}

</script>
</head>
<body>
    <textarea id="textarea" onkeyup="console.log('keyup inline event')">
    </textarea>

</body>
</html>
編集 履歴 (0)
  • たしかにkeyupで制御した方がスマートですね。ご回答ありがとうございます。 -

keydown->keyup は一連の処理なので keydownを発生させずにkeyupするのは無理です。

なので keydown の逆条件で keyup に条件式を追加してください。

編集 履歴 (1)
  • たしかに、キーを押して、キーを離すのですから、一連の処理ですよね。ご回答ありがとうございます。 -

上の例ですと、keyup の最初で 「Enterが押されていたら return する」処理を書けば済むのではないでしょうか。

編集 履歴 (0)
  • 少しグローバル変数が汚れるのがいやだったのですが、確かにこれが一番スマートな方法ですよね。ご回答ありがとうございます。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。