JavaScript

Question

如何使用jquery或Javascript在HTML页面中创建增量/减量文本框 .... The image are given below

我也想设置最大值和最小值....

如何实现这一目标？

Answer 1

简单：）

HTML：

<div id="incdec">
    <input type="text" value="0" />
    <img src="up_arrow.jpeg" id="up" />
    <img src="down_arrow.jpeg" id="down" />
</div>

Javascript（jQuery）：

$(document).ready(function(){
    $("#up").on('click',function(){
        $("#incdec input").val(parseInt($("#incdec input").val())+1);
    });

    $("#down").on('click',function(){
        $("#incdec input").val(parseInt($("#incdec input").val())-1);
    });

});

Answer 2

你试过input type="number"吗？

Answer 3

看看这里。我也用过它。

numeric-up-down-input-jquery

Answer 4

我认为你可以使用jquery ui spinner。有关演示，请查看链接here

Answer 5

试试这个Spinner控件。希望这会对你有所帮助。

http://www.devcurry.com/2011/09/html-5-number-spinner-control.html

Answer 6

function incerment(selector, maxvalue){
    var value = selector.val() != undefined ? parseInt(selector.val()) : 0;
    var max_value = maxvalue != undefined ? parseInt(maxvalue) : 100;
    if(value >= max_value){
     return false;
    } else {
     selector.val(++value);
    }
}
function decrement(selector, minvalue){
    var value = selector.val() != undefined ? parseInt(selector.val()) : 0;
    var min_value = minvalue != undefined ? parseInt(minvalue) : 1;
    if(value <= min_value){
        return false;
    } else {
        selector.val(--value);
    }
}

//MAXIMUM/MINIMUM QUANTITY
    $('#up').click(function(){
        incerment($("#incdec input"));
        return false;
    });
    $('#down').click(function(){
        decrement($("#incdec input"));
        return false;
    });

Answer 7

通过JavaScript（JQuery）启动箭头键盘和keydown

$("#amount").on('keydown', function (event) {

    //up-arrow
    if (event.which == 38 || event.which == 104) {
        $(this).val((parseInt($(this).val()) + 1));

    //down-arrow
    } else if (event.which == 40 || event.which == 98) {
        $(this).val((parseInt($(this).val()) - 1));
    }
});

Answer 8

JavaScript（JQuery）的增量和减量（ - 和+）##

$(document).ready(function () {
$('#cost').w2form ({
name : 'cost',
style : '',
fields : [
          {
            name : 'amount',
            type : 'int'
          }
        ]
});
$("#amount").keydown(function (e) {
var key = e.keyCode;
if (key == 40) {
    if ( $(this).val() != "") {
        $(this).val();
    } else {
        $(this).val("0");
        w2ui['cost'].record[$(this).attr('name')] = "0";
        w2ui['cost'].refresh();
    }
}
});
}

HTML

<html>
<form>
<label>Amount</label>
<input type="text" id="amount" name="amount" style= "width: 140px"/>
</form>
</html>

Answer 9

JavaScript

function forKeyUp(value,e){
e = e || window.event;
 if (e.keyCode == '38' || e.keyCode == '104') {
if(parseInt(value)<1000){
value=(parseInt(value) + 1);
var id = $(e.target).attr('id');
$("#"+id).val(value);
}
}
else if (e.keyCode == '40' || e.keyCode == '98') {
if(parseInt(value)>0){
value=(parseInt(value) - 1);
var id = $(e.target).attr('id');
$("#"+id).val(value);
}
}}

//通话功能

$("#amount")..on('keydown', function (event) {
forKeyUp($(this).val(),event);
});

Answer 10

只需尝试

<input type="number" name="points" step="1">

就是这样。在步骤中，您可以输入所需的任何值。箭头会在点击时移动很多步骤。

HTML - 如何在HTML页面上创建增量/减量文本框？

10 个答案:

JavaScript（JQuery）的增量和减量（ - 和+）##

HTML

JavaScript