「jQuery」範囲内に数値を変更する入力ボックスのサンプル
jqueryコード:
<style>
#valReduce,#valAdd{
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px solid #000000;
font-size: 28px;
font-weight: bold;
float: left;
cursor: pointer;
}
#numVal{
width: 80px;
height: 46px;
text-align: center;
line-height: 46px;
float: left;
}
</style>
<body>
<div>
<div id="valReduce">-</div>
<input id="numVal" />
<div id="valAdd">+</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var paInitVal=20;
var paMax=50;
var paInterval=2;
$(“#numVal")[0].value = paInitVal;
$(“#valReduce").click(function() {
$(“#numVal")[0].value=Number($(“#numVal")[0].value)-paInterval;
if($(“#numVal")[0].value < 0) {
$(“#numVal")[0].value = 0;
}
if($(“#numVal")[0].value > paMax) {
$(“#numVal")[0].value = paMax;
}
})
$(“#valAdd").click(function() {
$(“#numVal")[0].value=Number($(“#numVal")[0].value)+paInterval;
if($(“#numVal")[0].value > paMax) {
$(“#numVal")[0].value = paMax;
}
if($(“#numVal")[0].value < 0) {
$(“#numVal")[0].value = 0;
}
})
$(“#numVal").on(“blur", function() {
if($(“#numVal")[0].value > paMax) {
$(“#numVal")[0].value = paMax;
}
if($(“#numVal")[0].value < 0) {
$(“#numVal")[0].value = Math.abs($(“#numVal")[0].value)
}
$(“#numVal")[0].value = Number($(“#numVal")[0].value)
if(($(“#numVal")[0].value) == “NaN") {
$(“#numVal")[0].value = 1;
}
})
})
</script>