el-select filterable模糊搜索在iOS手机上无法弹出软键盘,解决方案

前提:

        el-select filterable模糊搜索在iOS手机上无法弹出软键盘,在手机上使用时,iOS手机,该组件无法唤起软键盘,导致没法进行模糊搜素。

        于是。开始去找原因,发现主要是因为 组件中,input上有一个readonly 属性,而该属性规定输入字段为只读。阻止了用户对值进行修改,直到满足某些条件才行。

 

 其在微信开发者工具上是可以模糊搜索,在手机上没法弹出软键盘搜素。

ios手机 h5没法搜素 

 

 想达到预期效果,效果图

想达到预期效果:可以进行模糊搜素 

 

解决方法 

main.js中
import ElementUi from 'element-ui';

ElementUi.Select.computed.readonly = function () {
const isIE = !this.$isServer && !Number.isNaN(Number(document.documentMode));
return !(this.filterable || this.multiple || !isIE) && !this.visible;
### 解决 `el-select` 在移动端无法实现模糊搜索的问题 在移动端设备上,尤其是 iOS 平台,Element UI 的 `<el-select>` 组件可能会遇到一些兼容性问题。其中最常见的问题是当设置 `filterable` 属性后,在 iPad 或其他移动设备上的输入框无法正常唤起软键盘进行搜索[^1]。 #### 问题分析 该问题的根本原因在于默认情况下,浏览器会阻止某些 HTML 输入控件的行为以优化用户体验。对于 Element UI 中的 `<el-select>` 组件来说,默认生成的输入框具有只读 (`readonly`) 属性。这种设计是为了防止用户直接编辑内容,但在移动端却导致了软键盘无法弹出的情况。 此外,iOS 设备还存在额外的样式和交互行为差异,可能导致点击事件响应异常或者需要多次触发才能生效[^2]。 --- #### 解决方案 ##### 方法一:移除 `readonly` 属性 通过覆盖组件内部逻辑的方式,强制移除输入框的 `readonly` 属性。可以通过自定义指令或 CSS 来完成此操作: ```javascript // 自定义 Vue 指令来动态修改 DOM 节点属性 Vue.directive('remove-readonly', { bind(el) { el.removeAttribute('readonly'); } }); ``` 然后将其绑定到 `<el-select>` 上: ```html <el-select v-remove-readonly placeholder="请选择产品花型" filterable id="fuck" v-model="flower"> <el-option v-for="(item, index) in flowerArr" :key="index" :label="item.name" :value="item.id"> </el-option> </el-select> ``` 这种方法能够有效解决软键盘弹出的问题。 --- ##### 方法二:调整样式以适配 iOS 行为 针对 iOS 特有的双击问题或其他潜在的交互障碍,可通过以下 CSS 进一步增强体验: ```css /* 防止滚动条透明度影响 */ .el-scrollbar > .el-scrollbar__bar { opacity: 1 !important; } /* 确保选项列表始终可见并可点击 */ .el-select-dropdown.is-multiple .el-select-dropdown__item { pointer-events: auto !important; } ``` 上述代码片段解决了部分因视觉效果引发的操作不便现象。 --- ##### 方法三:升级至最新版本 如果条件允许,建议更新项目所使用的 Element Plus 库至最新稳定版。官方团队持续改进框架性能以及跨平台支持能力,许多已知缺陷已在新发行版本中修复完毕。 注意检查文档说明是否有关于移动端特性的新增配置项或 API 支持情况。 --- ### 完整示例代码 以下是综合以上方法的一个完整实例: ```vue <template> <div> <el-select v-remove-readonly placeholder="请选择产品花型" filterable id="fuck" v-model="flower"> <el-option v-for="(item, index) in flowerArr" :key="index" :label="item.name" :value="item.id"> </el-option> </el-select> </div> </template> <script> export default { data() { return { flower: '', flowerArr: [ { name: '花型A', id: 1 }, { name: '花型B', id: 2 }, { name: '花型C', id: 3 } ] }; } }; </script> <style scoped> /* 处理 iOS 兼容性 */ .el-scrollbar > .el-scrollbar__bar { opacity: 1 !important; } </style> <!-- 自定义指令 --> <Vue.directive('remove-readonly', { bind(el) { el.removeAttribute('readonly'); } })>; ``` --- ### 总结 综上所述,要彻底解决 `<el-select>` 在移动端无法实现模糊搜索的问题,需从以下几个方面入手: 1. **移除 readonly 属性**,使输入框具备完整的交互功能; 2. **优化样式表现**,消除特定平台上可能存在的显示干扰因素; 3. 如果可行的话,考虑迁移到更高版本的基础库,利用其内置的功能提升开发效率与稳定性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值