共计 1233 个字符,预计需要花费 4 分钟才能阅读完成。
问题
业务开发中常常遇到要弹出数字键盘的问题,产品方心愿弹出带小数点的纯数字键盘。
上面代码:
<input type='number'/>
在 android 下能弹出数字与小数点的键盘,而且主动会屏蔽非法字符,很完满。
但 iOS 下不是纯数字键盘,只是键盘的第一行是数字而已:
而且 iOS 下无奈避免中文、字母、空格、及各种特殊符号。而且输出这些符号后绑定的值变成空,无奈获取以后显示的内容。
这种键盘很难解决,在 keydown input 等事件里做输出拦挡、过滤,难以解决所有情况。特地是切换到九宫格键盘后更是没法解决。
预期后果
咱们想要这样的键盘:
这种键盘在很多 app 外部,以及一些组件库里都见到过。iOS 原生很容易实现这种数字键盘,h5 里比拟麻烦。
解决方案如下:
这是一段 vue 代码:
<input v-model="purchaseMoney" type="text" inputmode="decimal" maxlength="12" placeholder="不少于 0.01 元" @input="onInputAmount($event)" @blur="onInputBlur($event)">
利用 inputmode 这个属性,具体请参考:https://developer.mozilla.org…
好,当初键盘曾经是带小数点的数字键盘了。在 iOS 下 safari,微信等大略看了下,目前都能够。
键盘是进去了,而后还须要写点逻辑解决一些非法状况:避免复制粘贴进来特殊字符、屏蔽表情、多个小数点并存、结尾有多个 0、替换结尾的 0 为新的数字、管制小数为 2 位等。
onInputAmount() {
let temp = this.purchaseMoney;
if (temp) {temp = temp.replace(/[^0-9.]/g, '');
// 字符串中有多个点,只保留第一个,其余的过滤掉
if (temp && temp.length && temp.indexOf('.') != temp.lastIndexOf('.')) {var arr = temp.split('.');
let first = arr.shift();
temp = first + '.' + arr.join('');
}
// 如果小数局部截取最多 2 位
if (temp.indexOf('.') != -1) {let intergerPart = temp.split('.')[0];
let decimalPart = temp.split('.')[1];
if (decimalPart.length > 2) {decimalPart = decimalPart.substring(0, 2);
}
temp = intergerPart + '.' + decimalPart;
}
// 去掉头部多余的 0
while (/^0[0-9]/.test(temp)) {temp = temp.substring(1);
}
}
this.purchaseMoney = temp;
},
至此,次要的性能根本满足了,当前发现问题再更新。