开发时遇到的问题记录一下:移动端ios、Android中input框输入限制问题(ionic)
IOS
input标签里:
type=“tel”: 直接调起ios的数字键盘(ios数字键盘没有小数点);删除小数点后一位时,小数点 直接删掉。
type=“number”: 全键盘可以任意输入,没有只能输入数字的限制
Android
type=“tel” :直接调起android的数字键盘,但是与ios的type="number"时类似,输入时没有限制。删除小数点后一位时,小数点直接删掉。
type=“number”: 只可输入数字和小数点,但是在真机测试时,删除小数点后一位时,光标直接移到小数点之前了。
校验事件用的input、textInput、keydown
input:校验数字输入问题,如保留一位小数等。
textInput:校验使其输入只为数字及小数点,及校验禁止输入-、+、E、e(e为无理数2.71828)
keydown:正常键盘字母的keycode都为229,无法判断禁用,可以判断下一项等周边的按键。(keyup也如此)
//keyCode为229 网上查说:好像是因为中文输入法还在处理,会给调用者先返回一个值,但是js中接受了值就不会再处理了,所以中文输入法下拿到的keyCode全部都是229。
对IOS用type=“number”,Android用type=“tel” 输入数据联合校验
//input (校验保留一位小数,且输入后小数点后一位转换为5)
getPoints(score) {
score.value = score.value.toString().replace(/[^\d.]/g, ''); //ios没生效,android限制输入
let data = score.value;
if (data.toString().indexOf(".") < 0 && data != "") {
this.inputPoint = parseFloat(data);
} else if (data.toString().indexOf(".") > 0 && data != "") {
let num;
if (+data.toString().match(/\d+(\.\d{0,1})?/)[0].toString().split('.')[1] > 0) {
num = +(data.toString().match(/\d+(\.\d{0,1})?/)[0].toString().split('.')[0] + '.' + 5);
this.inputPoint = num;
score.value = this.inputPoint;
} else {
this.inputPoint = parseFloat(data.toString().match(/\d+(\.\d{0,1})?/)[0].toString().split('.')[0]);
}
}
}
//textInput
handleDisabled(event, score) {
let data = score.value;
if (event.data == "." && data.toString().indexOf(".") > 0) {
event.preventDefault();
}
const invalidChars = ['-', '+', 'e', 'E'];
if (invalidChars.indexOf(event.data) !== -1) {
event.preventDefault();
}
//ios限制输入
if (this.platform.is('ios')) {
const numberChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
if (event.data !== 'Backspace' && event.data !== '.' && numberChars.indexOf(event.data) === -1) {
event.preventDefault();
}
}
}
//keydown
handleKeydown(event) {
//禁用周边键可用
if (event.keyCode === 9) {
event.preventDefault();//下一项
}
}