Jquery入力テキストの上下の矢印で数字を増減します

Question

私は基本的な数量フィールドを持っており、ユーザーはキーボードの上下に基づいてこの入力ボックス内の数字を増減できます。

次のから：EndangeredMassaキーボードコードhttps://stackoverflow.com/a/375426/560287でこれを追加するにはどうすればよいですか？ somethingはあなたの入力（S）と一致するセレクタである

var keynum = 0; 

if(window.event) { keynum = e.keyCode; } // IE (sucks) 
else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera 

if(keynum == 38) { // up 
    //Move selection up 
} 

if(keynum == 27) { // down 
    //Move selection down 
} 

Answer 1

//cache our input since we will be working with it each time an arrow key is pressed 
var $input = $('input'); 

//bind the the `keydown` event for the `document` object which will catch all `keydown` events that bubble up the DOM 
$(document).on('keydown', function (event) { 

    //up-arrow (regular and num-pad) 
    if (event.which == 38 || event.which == 104) { 

     //make sure to use `parseInt()` so you can numerically add to the value rather than concocting a longer string 
     $input.val((parseInt($input.val()) + 1)); 

    //down-arrow (regular and num-pad) 
    } else if (event.which == 40 || event.which == 98) { 
     $input.val((parseInt($input.val()) - 1)); 
    } 
}); 

を動作するはずです

ここはデモです：jQueryのevent.whichにcharCode/keyCode性質を正規化することを

注：

target 
relatedTarget 
pageX 
pageY 
which 
metaKey 

出典：http://api.jquery.com/category/events/event-object/

クエリはクロスブラウザ 一貫性のプロパティを次のように正規化

Answer 2

$("something").keyup(function(e){ 
    var keynum = 0; 

    if(window.event) { keynum = e.keyCode; } // IE (sucks) 
    else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera 

    if(keynum == 38) { // up 
     //Move selection up 
    } 

    if(keynum == 27) { // down 
     //Move selection down 
    } 
}); 

。

Answer 3

あなたのコードは正しく見えます。あなただけの

$('#itemId').keyup(function(e){ 
    /*YOUR CODE*/ 
}); 

Answer 4

...イベントにコードをバインドする方法を疑問に思っている場合は行うことができます：

<input type="text" id="yourinput" value="0"> 

$(document).on("keypress", '*', function(e) { 
    if (e.keyCode == 38) { // up 
     $('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1); 
    } 

    if (e.keyCode == 40) { // down 
     $('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1); 
    } 
}); 

ここフィドルhttp://jsfiddle.net/mSCBL/1/

Answer 5

をこれが

if(keynum == 38) { // up 
    this.value = parseInt(this.value)-1; 
} 

if(keynum == 27) { // down 
    this.value = parseInt(this.value)+1; 
} 

Answer 6

$("input").keypress(function(event) { 
     var val=$(this).val(); 
     if (event.keyCode== 38) { 
      val++ 
     $(this).val(val) 
     } 
     if (event.keyCode== 40) { 
      val-- 
      $(this).val(val) 
     };  
}); 

Answer 7

これを行うための小型のjQueryプラグインがあります：https://github.com/nakupanda/number-updown

用途：

$('#textInput').updown(); 

は、ここにライブデモを見る：http://jsfiddle.net/XCtaH/embedded/result/

キーボードとマウスホイールのイベントは、あなたの設定

Answer 8

をサポート番号への入力タイプも同様に機能します。これはIE9以降ではあまり効果がありませんが。

<input type="number">

出典：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number