37

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

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

コードはうまく機能しますが、私を悩ませていることが1つあります。Safari/MacとFirefox/Macはどちらも、上矢印キーを押しているときにカーソルを最初に移動します。<input type="text"/>これは、私が知る限り、すべてのテキストフィールドのデフォルトの動作であり、理にかなっています。

ただし、これにより、カーソルが前後にジャンプするという美的効果はあまり得られません（値が変更された後）。

最初のジャンプは続いてkeydownいますが、この知識があっても、それを防ぐことはできません。私は次のことを試しました：

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

イベントe.preventDefault()にkeyup参加することも役に立ちません。

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

4

6 に答える 6

30

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);
于 2009-07-03T23:18:52.200 に答える
17

より良い解決策はreturn false;、デフォルトの矢印キーの動作を防止することであることがわかりました。

input.addEventListener("keydown", function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);
于 2014-01-09T23:37:08.777 に答える
8

実際には、この作業を行うためのより優れた簡単な方法があります。

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

はい、とても簡単です！

于 2014-09-28T07:05:37.053 に答える
0

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

于 2009-07-03T19:42:13.550 に答える
-2

おそらくそうではありません。代わりに、カーソルを元のフィールドの最後に戻すための解決策を探す必要があります。人間が知覚するには速すぎるため、効果はユーザーにとっても同じです。

私はいくつかグーグルで検索し、このコードを見つけました。現在テストできず、IE6では動作しないと言われています。

textBox.setSelectionRange（textBox.value.length、textBox.value.length）;

于 2009-07-03T19:24:20.023 に答える