ios使用el-select的远程搜索无法唤起软键盘

本文详细记录了解决iOS设备上使用Element UI的el-select组件时遇到的软键盘无法正常弹出、清空按钮显示异常以及选中option后软键盘不关闭等问题的过程。通过调整组件属性、监听事件并结合用户代理判断,实现了与Android设备一致的交互体验。

首先根据网上的方法找到解决软键盘不能弹起问题

<template>
    <el-select
        ref="select"
        @hook:mounted="cancalReadOnly"
        @visible-change="cancalReadOnly"
    >
    </el-select>
</template>
<script>
    export default {
        methods: {
            cancalReadOnly(onOff) {
                this.$nextTick(() => {
                    if (!onOff) {
                        const {select} = this.$refs;
                        const input = select.$el.querySelector('.el-input__inner');
                        input.removeAttribute('readonly');
                    }
                });
            }
        }
    }
</script>

因为我还要做清空的功能,所以要加一个clearable属性,但是在加了这个属性之后,ios点击select框,没有立即弹出下拉框,而是先显示清空该按钮,再次点击才会弹出下拉框,所以做了以下处理

<template>
    <el-select
        ref="select"
        :clearable="showClose"
        @hook:mounted="cancalReadOnly"
        @visible-change="cancalReadOnly"
    >
    </el-select>
</template>
<script>
    export default {
    	data(){
    		return{
    			showfalse:false,
    		}
    	},
        methods: {
            cancalReadOnly(onOff) {
            	if (onOff) { // 打开下拉框 显示可清空按钮
					this.showClose = true
				}
                this.$nextTick(() => {
                    if (!onOff) {
                        const {select} = this.$refs;
                        const input = select.$el.querySelector('.el-input__inner');
                        input.removeAttribute('readonly');
                        // this.$refs.select.blur();  根据tip自行判断是否添加
                    }
                });
            }
        }
    }
</script>

到这可以直接点击select框弹出下拉框和软键盘了,但是在搜索后选择option后,软键盘没有关闭,并且光标聚焦在select,可以对select框中的label值进行删除,但是value值并没有删除,所以继续处理

<template>
    <el-select
        ref="select"
        :clearable="showClose"
        @blur.native.capture="onblur"
        @hook:mounted="cancalReadOnly"
        @visible-change="cancalReadOnly"
    >
    </el-select>
</template>
// 失去焦点
onblur() {
	setTimeout(() => {
		if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
			this.$refs.select.blur();
		}
		this.showClose = false
		var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
		window.scrollTo(0, Math.max(scrollHeight - 1, 0));
	}, 100);
},

到这里,ios使用el-select已经基本和android一样了,

tips:当select框中有值时,再次点击select框,下拉框关闭,软键盘未关闭,光标聚焦在label值,可以对label值进行删除,我们可以把this.$refs.select.blur();写在cancalReadOnly方法中即可

### 解决 `el-select` 组件在 iOS 设备上软键盘不弹出的问题 对于 `el-select` 组件在 iOS 设备上的软键盘无法弹出问题,主要原因是由于默认设置中的 `readonly` 属性阻止了输入框获取焦点并触发软键盘。通过调整组件配置以及监听特定事件来动态修改属性,可以有效解决问题。 #### 方法一:移除 readonly 属性 当用户点击输入框时,临时移除 `readonly` 属性以便允许输入操作: ```javascript methods: { setFocus() { this.$refs.selectRef.input.setAttribute('readonly', false); }, } ``` 同时,在失去焦点(`blur`)事件发生后重新设定此属性以保持原有行为: ```javascript methods: { handleBlur(event){ event.target.setAttribute('readonly', true); } } ``` 上述方法确保每次交互过程中都能正确处理 `readonly` 的状态变化[^2]。 #### 方法二:自定义 input 实现 另一种更彻底的方式是完全替换默认的 `<input>` 元素实现,从而绕过框架内部对 `readonly` 的控制逻辑。这种方式适用于需要高度定制化场景的情况。 创建一个新的 Vue 组件用于替代原有的输入控件,并在其内手动管理聚焦与失焦的行为。需要注意的是这种方法可能涉及到更多样式的适配工作。 #### 示例代码片段 下面是一个简单的例子展示如何利用 JavaScript 来解决这个问题: ```html <template> <div class="custom-input"> <!-- 使用原生 HTML 输入框 --> <input type="text" ref="nativeInput" @focus="onFocus" @blur="onBlur" v-model="searchText" placeholder="Search..." /> <!-- 下拉菜单列表 --> <ul v-if="showDropdown && options.length > 0"> <li v-for="(option, index) in filteredOptions" :key="index">{{ option.label }}</li> </ul> </div> </template> <script> export default { data(){ return{ searchText:'', showDropdown:false, options:[{label:'Option A'},{label:'Option B'}],// 假设这是选项数据源 }; }, computed:{ filteredOptions(){ const query=this.searchText.toLowerCase(); if(!query)return this.options; return this.options.filter(option=>option.label.toLowerCase().includes(query)); } }, methods: { onFocus(){this.showDropdown=true;}, onBlur(){setTimeout(()=>this.showDropdown=false,300);} } }; </script> ``` 这段代码展示了如何构建一个基本的可搜索下拉列表,其中包含了针对移动浏览器优化过的触摸友好型设计[^3]。 #### 注意事项 - 修改内置组件的行为可能会带来兼容性和维护方面的问题,请谨慎评估后再决定采用哪种方案。 - 如果项目依赖于 Element UI 或其他第三方库,则建议优先查阅官方文档寻找是否有已知修复措施或更新版本提供了改进的支持[^4]。
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值