[英]Attributes Ignored for <Input type=“number” /> in Html 5
我已經在 chrome、opera 和 Microsoft edge 中對其進行了測試,但仍然忽略了除 value 和 name 之外的屬性。
<input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />
總之,我的遞增和遞減按鈕繞過了限制這里是整個 HTML 代碼
<div class="quantity ml-auto">
<div class="input-group input-number-group">
<div class="input-group-button">
<span class="input-number-decrement">-</span>
</div>
<input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />
<div class="input-group-button">
<span class="input-number-increment">+</span>
</div>
</div>
</div>
我也在使用 Jquery。 如果我刪除此腳本,則屬性可以正常工作。 也許這個腳本有問題。
<script>
$('.input-number-increment').click(function() {
var $input = $(this).parents('.input-number-group').find('.input-number');
var val = parseInt($input.val(), 10);
$input.val(val + 1);
});
$('.input-number-decrement').click(function() {
var $input = $(this).parents('.input-number-group').find('.input-number');
var val = parseInt($input.val(), 10);
$input.val(val - 1);
});
</script>
終於,我得到了我的答案。 這是最終的代碼。
HTML代碼
<div class="quantity ml-auto">
<div class="input-group input-number-group">
<div class="input-group-button">
<span class="input-number-decrement">-</span>
</div>
<input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />
<div class="input-group-button">
<span class="input-number-increment">+</span>
</div>
</div>
</div>
CSS
input-number-group {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.input-number-group input[type=number]::-webkit-inner-spin-button,
.input-number-group input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
}
.input-number-group .input-group-button {
line-height: calc(80px/2 - 5px);
}
.input-number-group .input-number {
width: 80px;
padding: 0 12px;
vertical-align: top;
text-align: center;
outline: none;
display: block;
margin: 0;
}
.input-number-group .input-number,
.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
border: 1px solid #cacaca;
height: 40px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 0;
}
.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
display: inline-block;
width: 40px;
background: #e6e6e6;
color: #0a0a0a;
text-align: center;
font-weight: bold;
cursor: pointer;
font-size: 2rem;
font-weight: 400;
}
.input-number-group .input-number-decrement {
margin-right: 0.3rem;
}
.input-number-group .input-number-increment {
margin-left: 0.3rem;
}
最終劇本
<script>
$(document).ready(function () {
jQuery('.quantity').each(function () {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.input-number-increment'),
btnDown = spinner.find('.input-number-decrement'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function () {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function () {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.