jQuery通过键盘的上下箭头增减输入文本中的数字

Question

jQuery通过键盘的上下箭头增减输入文本中的数字

3

我有一个基本的数量字段，希望用户可以通过键盘上下箭头在输入框中增加/减少数字。

继承自：EndangeredMassa在键盘代码https://dev59.com/MHVC5IYBdhLWcg3weBE-#375426的答案，我该如何将其添加到keyup函数中？

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
}

- John Magnolia

1

你看过tangle.js吗？它有一种非常好的处理数字字段的方式。 - CamelCamelCamel

我认为你现在所需的是this.value++和this.value--分别用于上箭头和下箭头，你可能需要使用this.value = this.value.toInt()++。 - CBusBus

8个回答

5

将输入类型设置为数字也可以起作用。但是在IE9及以下版本中效果不太好。

<input type="number">

来源：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

这是一个HTML示例，用于演示如何使用“input”元素的“type = number”特性。此特性允许用户输入数字值，并可以在代码中进行验证和操作。如果您需要在网页中使用数字输入字段，这个示例将对您有所帮助。

- Mark Dean Guillermo

2

有一个小型的jQuery插件可以实现此功能：https://github.com/nakupanda/number-updown

使用方法：

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

点击此处查看实时演示：http://jsfiddle.net/XCtaH/embedded/result/

支持键盘和鼠标滚轮事件

- nakupanda

1

你可以这样做：

<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/

- Nicola Peluchetti

我认为你想要写的是：如果 (e.keyCode == 40) { // 向下 $('#yourinput').val(parseInt($('#yourinput').val(), 10) - 1); } 而不是：如果 (e.keyCode == 40) { // 向下 $('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1); } - Sajib Mahmood

1

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

- Salt Hareket

0

$("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 是一个选择器，用于匹配您的输入。

- James Montagne

jQuery 规范化了 which 属性，使其可以跨浏览器工作。我认为。 - Nicola Peluchetti

好的。我并没有真正看代码本身，只是展示如何将它放入“keyup”中。 - James Montagne

0

你的代码看起来差不多正确。如果你只是想知道如何将代码绑定到事件上...

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

- Dutchie432

0

这应该可以运行

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

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

- techfoobar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jasper · Accepted Answer

//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属性：

Query normalizes the following properties for cross-browser consistency:
target
relatedTarget
pageX
pageY
which
metaKey

来源: http://api.jquery.com/category/events/event-object/

这是一个关于jQuery事件对象的文档。事件对象是在DOM元素上触发事件时自动创建的JavaScript对象。它包含有关事件的详细信息，例如哪个键被按下或释放，鼠标指针的位置以及由事件调用的处理程序。您可以使用事件对象来编写更具交互性和可访问性的网页应用程序。