最近有个需求是利率只允许输入数字和小数点，用以下
<input type="number" pattern="[0-9]*">
在ios会调起数字键盘，但是左下角竟然是空不是“.”！
这个坑相信很多移动端h5开发会遇到，需支持小数点那就不能调起这种键盘了，那只能调起以下键盘
<input type="number">
但是问题又来了ios系统的type="number"竟然不能自动限制输入特殊字符！
那只能对这个键盘输入做限制特殊字符输入了！有以下两种方案限制（用的vue框架）
方案一：
<input type="number" @keydown="preventNotNumber($event)">
methods: {
isBackspace(keyCode) {
return keyCode === 8;
},
isDot(keyCode) {
return keyCode === 46 || keyCode === 110 || keyCode === 190;
},
isNumber(keyCode) {
return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
},
preventNotNumber(event) {
var keyCode = event. keyCode;
if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {
// 其他按键
event.preventDefault();
event.stopPropagation();
return false;
}
}
}
但是这个方案还有坑，有些键值竟然是相同的！例如键“2”和键“@”的keyCode都是50！
方案二：
<input type="number" @keydown="preventNotNumber($event)">
methods: {
isBackspace(keyValue) {
return keyValue === 'Backspace';
},
isDot(keyValue) {
return keyValue === '.';
},
isNumber(keyValue) {
return (keyValue >= 0 && keyValue <= 9);
},
preventNotNumber(event) {
var keyValue = event.key;
if (!calculator.isBackspace(keyValue) && !calculator.isDot(keyValue) && !calculator.isNumber(keyValue)) {
// 其他按键
event.preventDefault();
event.stopPropagation();
return false;
}
}
}
这个方案是直接对比按键值，虽然有点不是很好，但是毕竟能解决问题，限制除“.”外其他特殊字符的输入！