h5 调起ios数字键盘的坑,限制特殊字符输入方案

最近有个需求是利率只允许输入数字和小数点,用以下

<input type="number" pattern="[0-9]*">

在ios会调起数字键盘,但是左下角竟然是空不是“.”!

h5 调起ios数字键盘的坑,限制特殊字符输入方案

这个坑相信很多移动端h5开发会遇到,需支持小数点那就不能调起这种键盘了,那只能调起以下键盘

<input type="number">

h5 调起ios数字键盘的坑,限制特殊字符输入方案

但是问题又来了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!

h5 调起ios数字键盘的坑,限制特殊字符输入方案

方案二:

<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;
}
}
}

这个方案是直接对比按键值,虽然有点不是很好,但是毕竟能解决问题,限制除“.”外其他特殊字符的输入!

h5 调起ios数字键盘的坑,限制特殊字符输入方案

上一篇:Web资源文件的加载


下一篇:JXL基本操作