web-dev-qa-db-ja.com

上矢印キーを押している間、テキスト入力のデフォルトの動作を防止します

数値を含む基本的なHTML _<input type="text"/>_テキストフィールドを使用しています。

JavaScriptイベントkeyupを追加して、ユーザーが上矢印キー（_e.which == 38_）を押したときを確認します。次に、数値を増やします。

コードは問題なく機能しますが、バグが1つあります。上矢印キーを押すと、Safari/MacとFirefox/Macの両方が最初にカーソルを移動します。これは、私が知る限り、すべての_<input type="text"/>_テキストフィールドのデフォルトの動作であり、意味があります。

しかし、これはカーソルが前後にジャンプすることによる非常に審美的な効果を生み出しません（値が変更された後）。

最初のジャンプはkeydownで発生しますが、この知識があっても発生を防ぐことはできません。私は以下を試しました：

_input.addEventListener('keydown', function(e) {
    e.preventDefault();
}, false);
_

keyupイベントにe.preventDefault()を配置しても効果はありません。

カーソルが動かないようにする方法はありますか？

javascripteventsinputkeyboarddefault
31
riddle

カーソル位置を保持するには、バックアップinput.selectionStart値を変更する前。

問題は、WebKitがkeydownに反応し、Operaがkeypressを優先することです。そのため、どちらも処理されてスロットルされます。

var ignoreKey = false;
var handler = function(e)
{
    if (ignoreKey)
    {
        e.preventDefault();
        return;
    }
    if (e.keyCode == 38 || e.keyCode == 40) 
    {
        var pos = this.selectionStart;
        this.value = (e.keyCode == 38?1:-1)+parseInt(this.value,10);        
        this.selectionStart = pos; this.selectionEnd = pos;

        ignoreKey = true; setTimeout(function(){ignoreKey=false},1);
        e.preventDefault();
    }
};

input.addEventListener('keydown',handler,false);
input.addEventListener('keypress',handler,false);
28
Kornel

より良い解決策はreturn false;デフォルトの矢印キーの動作を防止するには：

input.addEventListener("keydown", function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);
16
Lukas

実際には、この仕事を行うためのより良い、より簡単な方法があります。

$('input').bind('keydown', function(e){
    if(e.keyCode == '38' || e.keyCode == '40'){
        e.preventDefault();
    }
});

はい、とても簡単です！

5
JChen___

私はコードをテストしましたが、イベントをキャンセルするようですが、非常に短い間矢印を押さないと、キープレスイベントが発生し、そのイベントが実際にカーソルを移動します。キープレスイベントハンドラーでもpreventDefault（）を使用するだけで問題ありません。

0
shw