Javascript HTML - 如何在 HTML 页面上创建递增/递减文本框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12209548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - How can I create an increment/decrement textbox on an HTML page?
提问by Manikandan Sethuraju
How can i create a increment/decrement text boxin HTML Page using jquery or Javascript.... 
如何使用 jquery 或 Javascript 在 HTML 页面中创建递增/递减文本框....
and also i want to set maximum and minimum values....
而且我想设置最大值和最小值....
How to i achieve this?
我如何实现这一目标？
采纳答案by rahul
回答by AdityaParab
Simple :)
简单的 ：）
HTML :
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) :
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);
});
});
回答by simoncereska
did you try input type="number"?
你试过input type="number"吗？
回答by Prabhuram
回答by janitheshan
Try this Spinner Control. hope this will help you.
试试这个微调控件。希望这会帮助你。
http://www.devcurry.com/2011/09/html-5-number-spinner-control.html
http://www.devcurry.com/2011/09/html-5-number-spinner-control.html
回答by shubhankar raj
Just try
你试一试
<input type="number" name="points" step="1">that's it. In the step, you can enter any value you want. And the arrows will move that many steps on clicking.
就是这样。在该步骤中，您可以输入所需的任何值。并且箭头会在点击时移动那么多步。
回答by Manish
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;
});
回答by Diana
Start of arrow keyup and keydown by JavaScript (JQuery)
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));
}
});
回答by Diana
JavaScript (JQuery) of increment and decrement for both ( - and + ) ##
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
<html>
<form>
<label>Amount</label>
<input type="text" id="amount" name="amount" style= "width: 140px"/>
</form>
</html>
回答by Diana
JavaScript
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);
}
}}
//Call function
//调用函数
$("#amount")..on('keydown', function (event) {
forKeyUp($(this).val(),event);
});
