当前位置：首页 > news >正文

el-select 可搜索下拉框在ios、ipad 无法唤出键盘，造成无法输入

news 来源：原创 2025/5/18 21:33:38

【效果图】：分组展示选项 =>【去界面操作体验】

首先，通过夸克浏览器的搜索: el-select 在 ipad 输入框，无法唤出键盘，因而无法输入.获得了解决方案，照方抓药，愈。过程记录：

在 iPad 上使用 Element UI 的 el-select 组件时，如果输入框无法唤出键盘，通常是由于组件内部的 readonly 属性导致的。以下是一些可能的解决方案：

移除 readonly 属性

Element UI 的 `el-select` 组件在 iOS 设备上无法唤起软键盘的问题，通常是因为组件内部的输入框被设置了 `readonly` 属性。可以通过以下方法移除该属性：123

在 el-select 组件上添加 ref，然后在 mounted 钩子函数中移除 readonly 属性。12

<el-select ref="select" @hook:mounted="removeReadOnly" @visible-change="removeReadOnly">     
    <!-- options --> 
</el-select>

removeReadOnly() { 
    this.$nextTick(() => { 
        const input = this.$refs.select.$el.querySelector('.el-input__inner');                     
        input.removeAttribute('readonly'); 
    }); 
}

监听触摸事件

在移动端，可以通过监听触摸事件来解决无法唤起键盘的问题。在组件的 mounted 钩子中添加触摸事件监听器，当检测到 el-select 被点击时，移除 readonly 属性。

mounted() { 
    if (this.isMobile) { 
        window.addEventListener('touchstart', this.handleTouch); 
    } 
}, 

beforeDestroy() { 
    if (this.isMobile) { 
        window.removeEventListener('touchstart', this.handleTouch); 
    } 
}, 

methods: { 
    handleTouch(e) { 
        if (e.target.className.includes('el-select') || e.target.className.includes('el-input__inner')) { 
            const input = document.querySelector('.el-input__inner'); input.removeAttribute('readonly'); 
        } 
    } 
}

全局处理

如果项目中多处使用 `el-select` 组件，可以考虑在全局范围内处理 `readonly` 属性。在项目的入口文件（如 main.js）中添加以下代码：1

Array.from(
    document.querySelectorAll('.el-select')).forEach((item) => 
    { 
        item.querySelector('.el-input__inner').removeAttribute('readonly'); 
    }
);

使用最新版本的 Element UI

确保使用的是最新版本的 Element UI，因为新版本可能已经修复了这个问题。