jqueryまたはJavascriptを使用してHTMLページにインクリメント/デクリメントテキストボックスを作成するにはどうすればよいですか。
また、最大値と最小値を設定したいのですが…。
これを達成するにはどうすればよいですか?
jqueryまたはJavascriptを使用して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) :
$(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);
});
});
やってみましたinput type="number"
か?
こちらをご覧ください。私も使ったことがあります。
jquery ui spinner を使用できると思います。デモについては、こちらのリンクをご覧ください
このスピナー コントロールを試してください。これがあなたを助けることを願っています。
http://www.devcurry.com/2011/09/html-5-number-spinner-control.html
$(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>
<form>
<label>Amount</label>
<input type="text" id="amount" name="amount" style= "width: 140px"/>
</form>
</html>