h5 android数字键盘,【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）...
在Vue中的項目，基于VUX-UI開發，一個常見的需求：
1、金額輸入框
2、彈出數字鍵盤
3、僅支持輸入兩位小數，限制最大11位數，不允許0開頭
第一，首先想到額就是在VUX-UI中制定type=number。--不可行
VUX中的文檔和代碼說明，type=number不支持maxLength，會報錯，而且沒有正則替換的處理或者鉤子函數，只有輸入后提示校驗信息。
第二，基于VUX中XInput封裝，有如下問題
1)兩層v-model，正則替換的值不會觸發input框渲染
解決：currentValue賦值為foramttedValue，放入setTimeout(func ,0)中，讓input框先渲染為正則替換前的值，再渲染為替換后的值
currentValue(val, oldVal) {//調用filter過濾數據
let formattedValue = this.filter(val);if (this.type === ‘number‘) {
formattedValue= this.typeNumberFilter(formattedValue, oldVal);
}if (val !== formattedValue || val === ‘‘) {
setTimeout(()=>{this.currentValue =formattedValue;
},0);
}this.$emit(‘input‘, formattedValue);
},
View Code
2)數字鍵盤input type=number，會導致maxlength失效，無法限制長度
解決：用slice(0, max)處理
if (formattedValue.length > this.max) {
formattedValue= formattedValue.slice(0, this.max);
}
View Code
3)數字鍵盤input type=number?，連續輸入小數點...導致實際值和顯示值不一致
解決：用原生的 inputElement.value = oldValue處理
const inputEle = this.$children[0].$refs.input;//TODO: 待大范圍驗證：處理連續輸入..后，type=number的input框會把值修改為‘‘的問題；fastclick導致type=number報錯
//問題描述： 1.00. 不會觸發值改變，1.00.不會觸發值改變，1.00.【\d\.】都會把值修改為空字符串‘‘。hack處理的條件說明如下：
//1、當校驗后是空值，(因input=number，formattedValue為‘‘表明 原始newVal也為‘‘)
//2、輸入框拿到的是空值(因input=number導致輸入框立即被賦予空值。點擊清除按鈕時，這里input輸入框還是上次的值)
//3、上次輸入大于兩位(避免最后一位無法刪除的問題。最后一位刪除時，oldVal.length === 1)
if (formattedValue === ‘‘ && inputEle.value === ‘‘ && oldVal && oldVal.match(/^(\d)[\d.]+/)) {
formattedValue=oldVal;
}
setTimeout(()=>{
inputEle.value=formattedValue;
},0);
View Code
4)IOS中數字鍵盤有%$*等特殊字符
解決：用原生的 inputElement.onkeydown監聽事件，非數字和退格和小數點直接return事件
mounted() {if (this.type === ‘number‘) {
const inputEle= this.$refs.xinput.$refs.input;//eslint-disable-next-line
inputEle.onkeydown = (e) =>{
const keyCode=e.keyCode;if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {//其他按鍵
e.preventDefault();
e.stopPropagation();return false;
}
};
}
}
View Code
第三，其他說明
為什么不用 type=tel？
type=tel在ios中沒有小數點
第四，全部代碼
:title="title":max="currentMax":min="currentMin":type="type"v-model="currentValue"@on-focus="onFoucus()"@on-blur="onBlur()":show-clear="showClear":placeholder="placeholder"ref="xinput">
data() {return{
currentValue:this.value,
};
},
computed: {
currentMax() {return (this.type === ‘number‘) ? undefined : this.max;
},
currentMin() {return (this.type === ‘number‘) ? undefined : this.min;
}
},
props: {
title: String,
max: Number,
min: Number,
type: String,
showClear: {
type: Boolean,default: true,
},
placeholder: String,
value: [String, Number],
filter: {
type: Function,default: (value) =>{
let formattedValue= ‘‘;
const match= value.match(/^([1-9]\d*(\.[\d]{0,2})?|0(\.[\d]{0,2})?)[\d.]*/);if(match) {
formattedValue= match[1];
}returnformattedValue;
},
}
},
watch: {
currentValue(val, oldVal) {//調用filter過濾數據
let formattedValue = this.filter(val);if (this.type === ‘number‘) {
formattedValue= this.typeNumberFilter(formattedValue, oldVal);
}if (val !== formattedValue || val === ‘‘) {
setTimeout(()=>{this.currentValue =formattedValue;
},0);
}this.$emit(‘input‘, formattedValue);
},
value(value) {this.currentValue =value;
},
},
methods: {
onFoucus() {this.$emit(‘on-focus‘);
},
onBlur() {this.$emit(‘on-blur‘);
},
typeNumberFilter(val, oldVal) {
const inputEle= this.$refs.xinput.$refs.input;
let formattedValue=val;//由于type=number不支持maxLength，用slice模擬
if (formattedValue.length > this.max) {
formattedValue= formattedValue.slice(0, this.max);
}//TODO: 待大范圍驗證：處理連續輸入..后，type=number的input框會把值修改為‘‘的問題；fastclick導致type=number報錯
//問題描述： 1.00. 不會觸發值改變，1.00.不會觸發值改變，1.00.【\d\.】都會把值修改為空字符串‘‘。hack處理的條件說明如下：
//1、當校驗后是空值，(因input=number，formattedValue為‘‘表明 原始newVal也為‘‘)
//2、輸入框拿到的是空值(因input=number導致輸入框立即被賦予空值。點擊清除按鈕時，這里input輸入框還是上次的值)
//3、上次輸入大于兩位(避免最后一位無法刪除的問題。最后一位刪除時，oldVal.length === 1)
if (formattedValue === ‘‘ && inputEle.value === ‘‘ && oldVal && oldVal.match(/^(\d)[\d.]+/)) {
formattedValue=oldVal;
}
setTimeout(()=>{
inputEle.value=formattedValue;
},0);returnformattedValue;
},
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);
},
},
mounted() {if (this.type === ‘number‘) {
const inputEle= this.$refs.xinput.$refs.input;//eslint-disable-next-line
inputEle.onkeydown = (e) =>{
const keyCode=e.keyCode;if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {//其他按鍵
e.preventDefault();
e.stopPropagation();return false;
}
};
}
}
};
View Code
總結
以上是生活随笔為你收集整理的h5 android数字键盘,【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我们都被监控了？揭秘全球电信网络7号信令
- 下一篇： java调用数据库的基本步骤_java数