Jquery通過上/下箭頭鍵盤增加/減少輸入文本中的數字

Question

我有一個基本數量字段，並希望允許用戶根據鍵盤向上/向下增加/減少此輸入框中的數字。

繼續之后：關於鍵盤代碼https://stackoverflow.com/a/375426/560287的 EndangeredMassa答案如何將其添加到鍵盤功能中？

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

這是一個演示： http ： //jsfiddle.net/QRNP8/1/

請注意，jQuery將charCode / keyCode屬性規范化為event.which ：

查詢規范化以下屬性以實現跨瀏覽器一致性：

 target relatedTarget pageX pageY which metaKey 

資料來源： http ： //api.jquery.com/category/events/event-object/

Answer 2

將輸入類型設置為數字也可以。 雖然這在IE9及以下版本中不會太大。

 <input type="number"> 

資料來源： http ： //www.w3schools.com/html/tryit.asp？ filename = tryhtml_input_number

Answer 3

這里有一個小的jQuery插件： https ： //github.com/nakupanda/number-updown

用途：

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

觀看現場演示： http ： //jsfiddle.net/XCtaH/embedded/result/

支持鍵盤和鼠標滾輪事件

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

$("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 6

$("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
    }
});

something是與您的輸入相匹配的選擇器。

Answer 7

你的代碼看起來是正確的。 如果您只是想知道如何將代碼綁定到事件...

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

Answer 8

這應該工作

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

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