ElementUI中日期时间选择器组件在移动端 点击input框弹出虚拟键盘(输入法)的问题

方法一:

使用ElementUI官方文档提供的方法, 在el-date-picker属性中添加:editable="false" 此方法只能使 input① 框阻止输入法弹出 , 无法阻止点击内部两个input框时输入法弹出

方法二

使用document.activeElement.blur()方法 , 去掉input框获得的焦点 在el-date-picker属性中添加@focus = 'preventPop' (命名随意)

使用JS

   preventPop() {
     this.$nextTick(() => { 
       //等待日期组件被渲染
       let inputTime = document.querySelectorAll('.el-input__inner') 
       //获取input框的dom节点
       inputTime.forEach(item => {
         item.addEventListener('focus', () => {
             document.activeElement.blur()
           //监听 当input框获取焦点时,去掉input框获得的焦点,阻止输入法弹出
         })
       })
     })
   }

使用TS

   preventPop() {
     this.$nextTick(() => { 
       let inputTime = document.querySelectorAll('.el-input__inner')
       inputTime.forEach(item => {
         item.addEventListener('focus', () => {
           // TS 需要对document.activeElement进行定义
           if (document.activeElement instanceof HTMLElement) {
             document.activeElement.blur()
           }
         })
       })
     })
   }