element-ui 的可搜索下拉框组件el-select 在移动端无法拉起输入法

WytheChan
  • 766

问题主要是在IOS端,安卓可以正常拉起手机的输入法,
在IOS端会出现下图的情况,组件已经获取了焦点,下拉框也出现了,但是输入法没有出现。
这有什么解决方法呢?
微信截图_20200214155104.png
下面是一个简单的demo

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>

   <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element-ui -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

</head>
<style type="text/css">
   

</style>


<body>
    <div class="container">
        <input type="text" placeholder="普通input">
        <br>
        <br>
        <br>
        <el-select v-model="sid" filterable placeholder="请选择门店" class="a-select" id="select">
            <el-option
              v-for="item in 5"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        
    </div>
    
</body>
<script>

    var app = new Vue({
        el:'.container',
        data:{
            cid:'',
        },
        methods: {
           
        },
      
    })

    $(function(){
        $('#select').on('touchstart', function() {
            $('#select').focus();
        });
    })


</script>

</html>
回复
阅读 6.4k
2 个回答
515LJK
  • 2
新手上路,请多包涵

我也遇到同样的问题了,然后我发现是input标签上的readonly属性导致这种情况的发生,看了一下el-select源码,实际上它内部是用一个计算属性去控制readonly属性,在下拉框展开的时候才会取消readonly,我猜也许是取消的速度比较慢,IOS在点击的时候还是检测到readonly的存在,因此键盘无法呼出。
image.png
所以我只能用一种很暴力的方式去除这个属性(毕竟要赶着下班)仅做参考

<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>

具体方案就是监听组件的事件,在组件mounted初始化和下拉框关闭的时候把readonly强制干掉

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏