element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法

最新推荐文章于 2025-03-23 11:16:05 发布

镜中先生

最新推荐文章于 2025-03-23 11:16:05 发布

阅读量1.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_45275983/article/details/128018780

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Element UI的select组件中，由于`readonly`属性导致iOS设备无法调起小键盘的问题，通过监听聚焦和失去聚焦事件动态移除`readonly`属性来解决，并提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://segmentfault.com/q/1010000021748033

原因：常规select是可以调起小键盘的。但是element-ui的select其实是input。并且这个input里面有个readonly属性，这个属性导致无法调起ios小键盘。在安卓上是没问题的

我们可以查看源码

经网络各路大神的指引，我们可以在每次获取焦点和失去焦点的时候把readonly干掉。目前发现这个方法是可行的

操作：

<el-select
      v-if="showAgents"
      ref="agentSelect" // 1.定义ref
      v-model="agents"
      :multiple="showAgentsMultiple"
      clearable
      filterable
      placeholder="选择"
      @hook:mounted="cancalReadOnly" // 2.定义事件
      @visible-change="cancalReadOnly"   // 3.定义事件
    >
      <el-option v-for="item in agentsOptions" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>

methods方法体里面定义方法

cancalReadOnly(onOff) {
      this.$nextTick(() => {
        if (!onOff) {
          const Selects = this.$refs
          console.log(Selects)
　　　　　　// 如果只有1个下拉框，这段就足够了---start
          if (Selects.agentSelect) {
            const input = Selects.agentSelect.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }
　　　　　　// 如果只有1个下拉框，这段就足够了---end
　　　　　　// 如果有多个，就加多几个，代码可以优化，我懒了
          if (Selects.agent2Select) {
            const appinput = Selects.appSelect.$el.querySelector('.el-input__inner')
            appinput.removeAttribute('readonly')
          }
          if (Selects.agent3Select) {
            const gameinput = Selects.gameSelect.$el.querySelector('.el-input__inner')
            gameinput.removeAttribute('readonly')
          }
        }
      })