ios移动端（手机、ipad）使用el-select的远程搜索无法唤起软键盘

解决方案：去除下拉框的readonly属性即可。

这个组件在blur的时候又把readonly加回去了，因此在blur的时候你还得把readonly去了。经过查select组件的源码，发现blur的时候有50毫秒的延迟用户体验优化，因此去除操作也得是个异步操作。

<el-form-item label="检测型号" size="small" prop="testModel"><el-selectfilterableref="select"@blur.native.capture="onblur"@hook:mounted="cancalReadOnly"@visible-change="cancalReadOnly":popper-append-to-body="false"v-model="ruleForm.testModel"placeholder="请选择型号"><el-optionv-for="(item, index) in testModelArr":key="index":label="item.model_name":value="item.model_name"></el-option></el-select>
</el-form-item>

methods: {// 失去焦点onblur(){setTimeout(() => {if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ //判断iPhone|iPad|iPod|iOSthis.$refs.select.blur()}var scrollHeight=document.documentElement.scrollTop || document.body.scrollTop||0;window.scrollTo(0,Math.max(scrollHeight-1,0))}, 100);},//取消只读cancalReadOnly(onOff){this.$nextTick(()=>{if(!onOff){const {select} =this.$refs;const input =select.$el.querySelector('.el-input__inner')input.removeAttribute('readonly')}})}
}

ios移动端（手机、ipad）使用el-select的远程搜索无法唤起软键盘相关推荐

ios使用el-select的远程搜索无法唤起软键盘
首先根据网上的方法找到解决软键盘不能弹起问题 <template><el-selectref="select"@hook:mounted="cancal ...
el-select 在iOS手机上，无法唤起软键盘以及二次点击问题
问题 element UI 中有一个el-select组件.我们经常用它来实现下拉框功能. 但是在手机上使用时,发现iOS手机上,该组件无法唤起软键盘. 主要是因为组件中,input上有一个read ...
ios点击有300毫秒延迟，输入框必须重压或长按才能获取焦点唤起软键盘
以下方法主要针对在vue中的使用 // ios点击有300毫秒延迟 1. 安装依赖包cnpm install fastclick --save 2. 在 /src/main.js 中引入并使用impo ...
vue 全局键盘_如何解决ios input框唤起软键盘不灵敏问题？
为什么移动端点击事件要加300ms延迟呢? 早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPh ...
input 禁止手机唤起软键盘，并且光标存在
首先先将input 设置为readonly="readonly"状态 input添加点击事件click(防止多次点击唤出软键盘) 后在input readonly 状态下聚焦 l ...
el-select 在iOS手机上，无法唤起软键盘
问题描述提示:这里描述项目中遇到的问题: el-select添加 filterable 属性,支持搜索,在 ios 手机上无法唤起软件盘进行搜索原因分析: 提示:这里填写问题的分析: 主要是因为 ...
web端ios布局fixed元素软键盘唤起时fixed失效
在ios上做了一个简单的页面头部置顶底部置顶源码如下: <!DOCTYPE html> <html lang="en"> <head><m ...
移动端软键盘兼容方案
转自:https://segmentfault.com/a/1190000018959389 前言最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶) ...
处理ios软键盘弹起和收起时页面滚动问题
处理ios软键盘弹起和收起时页面滚动问题背景: 在开发添加主播功能时,页面底部需要弹出一个抽屉弹窗,点击抽屉上的输入框,会唤起软键盘,由于iOS的软键盘触发方式是将页面滚动,所以导致页面位置偏移 b ...

ios移动端（手机、ipad）使用el-select的远程搜索无法唤起软键盘

ios移动端（手机、ipad）使用el-select的远程搜索无法唤起软键盘相关推荐

最新文章

热门文章