el-select 在iOS手机上，无法唤起软键盘以及二次点击问题

问题

element UI 中有一个el-select组件。我们经常用它来实现下拉框功能。但是在手机上使用时，发现iOS手机上，该组件无法唤起软键盘。

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

方案

// 本案例只为处理兼容问题，不包含其他复杂逻辑
<template><el-selectref="select"@focus="clear"@hook:mounted="clear"@visible-change="clear"></el-select>
</template>
<script>export default {methods: {clear(async) {this.$nextTick(() => {if (!async) {// ios 手机有延迟问题setTimeout(() => {const { select } = this.$refsconst input = select.$el.querySelector('.el-input__inner')input.removeAttribute('readonly')}, 200)}})}}}
</script>

二次点击问题

el-select下拉选项在ios上，需要点击2次才能选中（通过css解决，需确保css样式全局作用域）

// App.vue
<style lang="scss">// to fix 在ios设备中，el-select组件下拉框，点击2次才能选中问题。.el-scrollbar .el-scrollbar__bar {opacity: 1 !important;}
</style

完成以上操作就可以正常使用了。

clearable 清空问题

如果el-select 还增加了clearable清空功能，会发现当你点击选中时，首先会出现清空按钮，二次点击才能弹出软键盘。

// 我们增加一个 showClose，用来控制 clearable 显示隐藏。<template><el-selectref="select"@focus="clear":clearable="showClose"@hook:mounted="clear"@visible-change="clear"@blur.native.capture="onblur"></el-select>
</template>
<script>export default {data(){return{showfalse:false,}},methods: {clear(onOff) {if (onOff) { // 打开下拉框 显示可清空按钮this.showClose = true}this.$nextTick(() => {if (!async) {// ios 手机有延迟问题setTimeout(() => {const { select } = this.$refsconst input = select.$el.querySelector('.el-input__inner')input.removeAttribute('readonly')}, 200)}})},// 失去焦点时，需要把软键盘收起onblur() {setTimeout(() => {if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOSthis.$refs.select.blur();}this.showClose = false}}}
</script>

这种办法

其实我个人觉得，在移动端也不太需要clearable功能，因此我做了一个判断。在移动端的情况下，clearable 值设为 false

 mounted () {if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOSthis.showClose = false}}

el-select 在iOS手机上，无法唤起软键盘以及二次点击问题相关推荐

三星手机上，setOnEditorActionListener软键盘监听回车无效，解决方案
监听软键盘事件的keyCode的三种方法经测试在三星S4以及I9158上无效.目测其他三星也无效用下面这种方法,监听Edittext的文本改变. editext.addTextChangedList ...
filter在ios不兼容 js_jq的animate属性不支持transform 和 ios手机上box-shadow兼容性问题和...
一.jq的animate属性不支持transform 解决方法,用jq的插件jquery.transit.js $('#pano').children().children().transition( ...
ios点击有300毫秒延迟，输入框必须重压或长按才能获取焦点唤起软键盘
以下方法主要针对在vue中的使用 // ios点击有300毫秒延迟 1. 安装依赖包cnpm install fastclick --save 2. 在 /src/main.js 中引入并使用impo ...
vue 全局键盘_如何解决ios input框唤起软键盘不灵敏问题？
为什么移动端点击事件要加300ms延迟呢? 早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPh ...
el-select 在iOS手机上，无法唤起软键盘
问题描述提示:这里描述项目中遇到的问题: el-select添加 filterable 属性,支持搜索,在 ios 手机上无法唤起软件盘进行搜索原因分析: 提示:这里填写问题的分析: 主要是因为 ...
ios使用el-select的远程搜索无法唤起软键盘
首先根据网上的方法找到解决软键盘不能弹起问题 <template><el-selectref="select"@hook:mounted="cancal ...
input 禁止手机唤起软键盘，并且光标存在
首先先将input 设置为readonly="readonly"状态 input添加点击事件click(防止多次点击唤出软键盘) 后在input readonly 状态下聚焦 l ...
解决 H5 IOS input 聚焦时，软键盘将页面整个推上去，键盘收起页面未下移 BUG
目录问题描述解决方案问题描述近日在开发H5应用时,测试人员发现在IOS低版本中input,textArea等输入框聚焦时,软键盘弹起会将整个页面向上顶,收回键盘后,页面不会回弹恢复页面,导致页 ...
ios手机上 h5页面返回后不刷新问题
在开发中遇到的两种情况 1.第一种是因为app内嵌页面.在A页面里会有一个按钮跳转到B页面选择医生,当选择完再跳转回来A.这样重复多次后,再次点击A页面的返回后就还是返回到了B而不是app的页面.原因 ...

el-select 在iOS手机上，无法唤起软键盘以及二次点击问题

问题

方案

二次点击问题

clearable 清空问题

这种办法

el-select 在iOS手机上，无法唤起软键盘以及二次点击问题相关推荐

最新文章

热门文章