1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ios移动端(手机 ipad)使用el-select的远程搜索无法唤起软键盘

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

时间:2019-10-19 01:13:07

相关推荐

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')}})}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。