矢印を押しながらテキスト入力のデフォルト動作を防止する

Question

私は基本的なHTML <input type="text"/>テキストフィールドを数値で扱っています。

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

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

しかし、カーソルの前後のジャンプ（値が変更された後）の美的効果はあまりありません。

最初のジャンプは​​に起こりますが、この知識があっても発生を防ぐことはできません。私は、次のことを試してみました：keyupイベントでe.preventDefault()を置く

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

はどちらか助けていません。

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

Answer 1

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

問題は、WebKitが​​に反応し、Operaがkeypressを好むので、kludgeがあります。両方が処理され、抑制されます。

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); 

Answer 2

おそらくそうではありません。代わりに、カーソルを元のフィールドの最後に戻すソリューションを探してください。この効果は、人間が知覚するには速すぎるので、ユーザにとっては同じであろう。

私はグーグルでこのコードを見つけました。私は今それをテストすることはできませんし、それはIE 6で動作しないと言われています。

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

Answer 3

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

Answer 4

私はよりよい解決策は、デフォルトの矢印キーの動作を防ぐために、ちょうどreturn false;にあることがわかった。

input.addEventListener("keydown", function(e) { 
    if (e.keyCode === 38 || e.keyCode === 40) return false; 
}, false); 

Answer 5

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

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

はい、とても簡単です！