input禁止输入
- 只能输入数字、汉字、英文
- 文本合成系统如 input method editor (即输入法编辑器)开始新的输入合成时会触发 compositionstart 事件
- 当文本段落的组成完成或取消时, compositionend 事件将被触发
<input type="text" v-model="contactName" @compositionstart="onCompositionStart" @compositionend="onCompositionEnd" @input="nameInputfn"/>
<input type="number" v-model="contactPhone" pattern="[0-9]*" @input="phoneInputfn"/>
data () {
return {
lock: false,
androidNumber: ''
}
}
onCompositionStart() {
this.lock = true;
},
onCompositionEnd(e) {
this.lock = false;
this.nameInputfn(e);
},
nameInputfn (e) {
if (!this.lock) {
this.contactName = e.target.value = e.target.value.replace(/[^\w\u4E00-\u9FA5]/g,'')
}
}
phoneInputfn (e) {
let targetValue = e.target.value
let u = window.navigator.userAgent
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
if (isAndroid) {
targetValue && (this.androidNumber = targetValue)
if (['+','-'].includes(e.data)) {
this.$nextTick(()=>{
this.contactPhone = e.target.value = this.androidNumber
})
}
}
if (this.contactPhone.length>11) {
this.contactPhone = this.contactPhone.slice(0, 11)
return
}
this.contactPhone = e.target.value = targetValue.replace(/[^0-9]/g,'')
}
博客迁移