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

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

<template><el-selectref="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-selectref="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-selectref="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|iOSthis.$refs.select.blur();}this.showClose = falsevar 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方法中即可

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

ios移动端（手机、ipad）使用el-select的远程搜索无法唤起软键盘
解决方案:去除下拉框的readonly属性即可. 这个组件在blur的时候又把readonly加回去了,因此在blur的时候你还得把readonly去了.经过查select组件的源码,发现blur的时 ...
el-select 在iOS手机上，无法唤起软键盘以及二次点击问题
问题 element UI 中有一个el-select组件.我们经常用它来实现下拉框功能. 但是在手机上使用时,发现iOS手机上,该组件无法唤起软键盘. 主要是因为组件中,input上有一个read ...
IOS微信6.7.4输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置
IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦, ...
ios点击有300毫秒延迟，输入框必须重压或长按才能获取焦点唤起软键盘
以下方法主要针对在vue中的使用 // ios点击有300毫秒延迟 1. 安装依赖包cnpm install fastclick --save 2. 在 /src/main.js 中引入并使用impo ...
vue 全局键盘_如何解决ios input框唤起软键盘不灵敏问题？
为什么移动端点击事件要加300ms延迟呢? 早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPh ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
IOS微信6.7.4输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置...
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
el-select 在iOS手机上，无法唤起软键盘
问题描述提示:这里描述项目中遇到的问题: el-select添加 filterable 属性,支持搜索,在 ios 手机上无法唤起软件盘进行搜索原因分析: 提示:这里填写问题的分析: 主要是因为 ...
仿ios输入法点击输入框以外区域自动隐藏软键盘
public static boolean isTouchedView(View v, MotionEvent event) {if (v != null && (v instance ...

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

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

最新文章

热门文章