我有一个输入类型编号元素,其中包含最小值和最大值。防止默认功能我已将其定制为使用带有单独输入的功能。
我不知道如何从包含min和max属性的input元素触发最大值。虽然我给出了最大范围,但正好超过了这个值。
$('.plus').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').attr('value', val + 1);
});
$('.minus').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').attr('value', val - 1);
}
});

body {
background-color:#eeeeee;
margin: 40px;
}
.minus,
.plus {
border: none;
padding: 10px;
width: 40px;
font-size: 16px;
}
input[type=number].quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity {
padding: 10px;
border: none;
width: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quantity-block">
<input class="minus" type="button" value="-">
<input type="number" value="1" class="quantity" size="4" min="1" max="5"/>
<input class="plus" type="button" value="+">
</div>
&#13;
答案 0 :(得分:1)
您可以阅读max
属性,然后在条件中使用它。:
$('.plus').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
var max = parseInt($(this).prev('input').attr('max'));
if(val < max) {
$(this).prev('input').attr('value', val + 1);
}
});
$('.minus').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').attr('value', val - 1);
}
});
body {
background-color:#eeeeee;
margin: 40px;
}
.minus,
.plus {
border: none;
padding: 10px;
width: 40px;
font-size: 16px;
}
input[type=number].quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity {
padding: 10px;
border: none;
width: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quantity-block">
<input class="minus" type="button" value="-">
<input type="number" value="1" class="quantity" size="4" min="1" max="5"/>
<input class="plus" type="button" value="+">
</div>
答案 1 :(得分:0)
你只需要设置if条件,
body {
background-color:#eeeeee;
margin: 40px;
}
.minus, .plus {
border: none;
padding: 10px;
width: 40px;
font-size: 16px;
}
input[type=number].quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity {
padding: 10px;
border: none;
width: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quantity-block">
<input class="minus" type="button" value="-">
<input type="number" value="1" class="quantity" size="4" min="1" max="5"/>
<input class="plus" type="button" value="+">
</div>
with open('words.txt', 'r') as f:
for line in f:
secret = line #Normally there are no \n at the end
#Use this is in case you still get the \n
#secret = line.rstrip('\n')
答案 2 :(得分:0)
实际上min/max
的{{1}}属性正常,但只有箭头键,对于input[type=number]
按钮点击,最好有一些条件如下所示:
+/-
$('.plus').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
if (val != $(this).prev('input').attr('max')) { // check the value against max attribute
$(this).prev('input').attr('value', val + 1);
}
});
$('.minus').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val != $(this).next('input').attr('min')) {// check the value against min attribute
$(this).next('input').attr('value', val - 1);
}
});
body {
background-color: #eeeeee;
margin: 40px;
}
.minus,
.plus {
border: none;
padding: 10px;
width: 40px;
font-size: 16px;
}
input[type=number].quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity {
padding: 10px;
border: none;
width: 40px;
}
答案 3 :(得分:0)
Javascript独立于HTML5验证。因此,您可以从jquery获取最大值和最小值,并将最大值和最小值设置为js。喜欢:
$('.plus').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
var max = parseInt($(this).prev('input').attr('max'));
if(val == max) {
return;
}
$(this).prev('input').val(val + 1);
});
$('.minus').on('click', function(e) {
var val = parseInt($(this).next('input').val());
var min = $(this).prev('input').attr("min");
if (val == min) {
return;
}
$(this).next('input').val(val - 1);
});
// to prevent when user directly type to the textbox
$(".quantity").keydown(function(){
var val = $(this).val();
var min = $(this).attr("min");
var max = $(this).attr("max");
if(val > max || val < min){
$(this).val("");
return false;
}
});
答案 4 :(得分:0)
我在学习时必须解决的问题的变化 - (使两个按钮递增或递减一个值,当数字达到最小值时 - 将其重置为最大值,反之亦然)。为了考虑你的最小/最大值,我重新调整了一下。不是说它必然是好的 - 但对于学习程序员来说这是一个有趣的问题。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type = "button" value = "-1"></input>
<input type = "text" value = "1" id="counter" min="0" max="5"></input>
<input type = "button" value = "+1"></input>
<script>
$(":button").click(function() {
var result = parseFloat($("#counter").val())+parseFloat(($(this).val()));
if(result>$("#counter").attr('max')){result=1}else{if(result==$("#counter").attr('min')){result=5}};
$('#counter').val(result);
});
</script>
</body>
</html>