移动端输入框禁止软键盘弹出

最新推荐文章于 2024-11-13 13:42:08 发布

原创最新推荐文章于 2024-11-13 13:42:08 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #前端

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

ElementUI

12 篇文章

订阅专栏

移动端

9 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript和Vue.js的指令来阻止输入框和时间选择器在移动端弹出虚拟键盘。通过监听`focus`事件并调用`blur`方法强制失去焦点，从而避免了虚拟键盘的显示。同时，对于Element UI的时间选择器，博主提供了针对单个日期选择器和日期范围选择器的解决方案，通过添加事件监听器同样实现禁用焦点和虚拟键盘。

输入框：

 <el-input v-model="value" @focus="forbid" />

//focus 聚焦事件
 forbid () {
      document.activeElement.blur()
 }

document.activeElement：返回文档中当前获得焦点的元素。

时间输入框：

//单个时间
<el-date-picker
            @focus="forbid"
            value-format="yyyy-MM-dd"
            v-model="reportForm.reportDate"
            type="date"
            placeholder="选择日期"
          >
</el-date-picker>

//时间范围
 <el-date-picker
              v-model="supplyWorkOrderForm.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              unlink-panels
              @focus="forbid"
>


 // 禁止移动端点击时间选择器弹出虚拟键盘
    forbid () {
      document.activeElement.blur()
      this.$nextTick(() => {
      //单个时间插件
        let inputTime = document.querySelectorAll(
          '.el-date-editor .el-input__inner'
        )
        inputTime.forEach(item => {
          item.addEventListener('focus', () => {
            document.activeElement.blur()
          })
        })
        //时间范围插件
        let input = document.querySelectorAll(
          '.el-date-range-picker__editor .el-input__inner'
        )
        input.forEach(item => {
          item.addEventListener('focus', () => {
            document.activeElement.blur()
          })
        })
      })
    },