ios，安卓 input禁止输入方式

input禁止输入

• 只能输入数字、汉字、英文
• 文本合成系统如 input method editor (即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件
• 当文本段落的组成完成或取消时, compositionend 事件将被触发

<!-- 代码为vue实例 -->
<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: '' //安卓input 数据存储
  }
}
// 文本输入框
// 禁止输入 开始触发
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,'')
    }
}
// 数字输入框
// type= number && pattern="[0-9]*" 调取IOS纯数字键盘，安卓数字键盘
phoneInputfn (e) {
  let targetValue = e.target.value
  let u = window.navigator.userAgent
  // 安卓数字键盘 + - 会清空input值  需要加外部变量androidNumber存储
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  if (isAndroid) {
    targetValue && (this.androidNumber = targetValue)
    if (['+','-'].includes(e.data)) {
      // DOM更新延迟数据回调 赋值
      this.$nextTick(()=>{
        this.contactPhone = e.target.value = this.androidNumber
      })
    }
  }
  // type= number 类型maxlength 失去作用
  if (this.contactPhone.length>11) {
    this.contactPhone = this.contactPhone.slice(0, 11)
    return
  }
  // 清空不是数字正则
  this.contactPhone = e.target.value = targetValue.replace(/[^0-9]/g,'')
}

博客迁移