我正在使用
HTML5 input type=number我想将数量增加
onestep=1min=1我正在使用以下代码：
<form action="" class="cart" method="post" enctype='multipart/form-data'>
<div class="quantity">
<input type="number" step="1" min="1" name="quantity" value="1" title="Qty" class="input-text qty text" />
</div>
<button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
</form>
是否有任何补丁或破解程序可以使其在 Firefox 和 IE9 中工作。否则，可能的解决方案是什么。
Firefox 或 Internet Explorer 不支持，版本 11 除外，部分支持。请参阅此比较矩阵。
您可以使用 number polyfill shim 来获取对不受支持的浏览器的支持。
或者，您可以使用带有
pattern=""<input type="text"
name="quantity"
pattern="[1-9]"
value="1"
required
title="Qty"
class="input-text qty text"
/>
您可以根据您的数量需求更改模式，现在设置的值范围为 1 到 9。您还可以使用 JS/jQuery 添加向上/向下按钮，并绑定热键以获得更像数字字段的感觉。
对于 React，我使用了一个简单而干净的实现来禁止 Firefox/Safari/Chrome 等中的字母...
<input type="number" onKeyDown={(event) => checkIfNumber(event)} />checkIfNumber(event) {
/**
* Allowing: Integers | Backspace | Tab | Delete | Left & Right arrow keys
**/
const regex = new RegExp(/(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/);
return !event.key.match(regex) && event.preventDefault();
}
允许更多按键：
通过在控制台中记录
event.keyregex|请记住，此解决方案仅允许
Integersfloatingregexregex = new RegExp(/(^\d*\.?\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/)您可以在此处构建并检查您的正则表达式模式：
Firefox 或 IE9 尚不支持输入类型
numbertext请参阅此兼容性图表。
确实不需要“补丁或破解”——常规输入字段就可以正常工作。这就是它恢复为文本字段的原因。无论它是否向最终用户显示为实际数字字段，都只是一个“奖励”，使其稍微方便一些。您仍然应该对发送给您的任何值进行服务器端检查，因此，当用户的浏览器不支持数字类型时，允许用户仅输入数字不会造成任何损害。
const input = document.getElementById("numberInput");
input.addEventListener("keypress", e => {
// If the input is empty and the key pressed is "0" nothing is printed
if (!e.target.value && e.key == 0) {
e.preventDefault();
} else {
// If the key pressed is not a number or a period, nothing is printed
if (!/[0-9.]/.test(keyValue)) {
e.preventDefault();
}
}
}
我还创建了一个函数，允许最多写入三个整数和两个小数。 希望对你有帮助。
我通常会在我的推特上发布对我有帮助的信息或一些解决方案（
@PabloAndresValC）
input.addEventListener("keypress", e => {
const keyValue = e.key;
// If the input is empty and the key pressed is "0" nothing is printed
if (!e.target.value && keyValue == 0) {
e.preventDefault();
} else {
// If the key pressed is not a number or a period, nothing is printed
if (!/[0-9.]/.test(keyValue)) {
e.preventDefault();
} else {
// If the number has one or two whole numbers and a point, another
// point won't be printed
if (/[0-9]{1,2}[.]/.test(e.target.value) && keyValue == ".") {
e.preventDefault();
}
// If the number has one or two whole numbers and a point
else if (/[0-9]{1,2}[.]/.test(e.target.value)) {
// We can write up to two more numbers after the point
if (/[0-9]{1,2}[.][0-9]{2}/.test(e.target.value)) {
e.preventDefault();
}
}
// If there are 3 numbers and we press another, a point
// will be printed automatically
// And we can write up to two more numbers after the point
else if (/[0-9]{3}/.test(e.target.value) && keyValue != ".") {
e.target.value += ".";
if (/[0-9]{3}[.][0-9]{2}/.test(e.target.value)) {
e.preventDefault();
}
}
}
}
});
<input class="form-control form-control-sm" id="qte" type="number" min="1" max="30" step="1" [(ngModel)]="numberVoucher"
(keypress)="FilterInput($event)" />
这是 FilterInput 函数：
FilterInput(event: any) {
let numberEntered = false;
if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
//console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
numberEntered = true;
}
else {
//input command entered of delete, backspace or one of the 4 directtion up, down, left and right
if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
//console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
}
else {
//console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
event.preventDefault();
}
}
// input is not impty
if (this.validForm) {
// a number was typed
if (numberEntered) {
let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
console.log('new number : ' + newNumber);
// checking the condition of max value
if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
console.log('valid number : ' + newNumber);
}
else {
console.log('max value will not be valid');
event.preventDefault();
}
}
// command of delete or backspace was types
if (event.keyCode == 46 || event.which == 8) {
if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
console.log('min value will not be valid');
this.numberVoucher = 1;
//event.preventDefault();
this.validForm = true;
}
}
}
// input is empty
else {
console.log('this.validForm = true');
this.validForm = false;
}
};
在这个功能中我必须让数字、方向、删除键输入。
document.querySelector('#number-input').addEventListener('keydown', function(evt){
!/(^\d*\.?\d*$)|(Backspace|Control|Meta|a)/.test(evt.key) && evt.preventDefault()
})<html>
<input type="number" id="number-input"/>
</html>
用这个
这对我有用
const AdminNewPriceInput = () => {
const [value, setValue] = useState(0);
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const parse = parseInt(e.target.value);
setValue(isNaN(parse) ? 0 : parse);
};
return (
<input
type="number"
value={value.toString()}
onChange={handleChange}
onKeyPress={e => /[0-9+]/.test(e.key) || e.preventDefault()}
/>
)};
一定要注意
value.toString()