9

如何使用 jquery 或 Javascript 在 HTML 页面中创建递增/递减文本框...。图片如下

而且我想设置最大值和最小值....

我如何做到这一点？

4

10 回答 10

12

简单的 ：）

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

});
于 2012-08-31T06:15:50.260 回答
9

你试过了input type="number"吗？

于 2012-08-31T05:49:07.207 回答
3

你试一试

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

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

于 2019-03-30T03:48:55.203 回答
2

看看这里。我也用过。

数字上下输入-jquery

于 2012-08-31T05:48:22.440 回答
1

我认为您可以使用 jquery ui spinner 。有关演示，请查看此处的链接

于 2012-08-31T06:08:52.087 回答
1

试试这个微调控件。希望这会帮助你。

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

于 2012-10-22T05:21:47.127 回答
1

（ - 和 + ）的递增和递减的 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>
于 2018-03-20T08:25:47.187 回答
0 
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;
    });
于 2017-01-31T10:16:16.257 回答
0

JavaScript（JQuery）的箭头键向上和向下键的开始

$("#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));
    }
});
于 2018-03-12T03:58:34.057 回答
0

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);
});
于 2018-06-28T03:10:50.100 回答