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

问题主要是在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>

element-ui vue.js javascript

阅读 10.1k

2 个回答

得票最新

515LJK

发布于
2020-11-07

新手上路，请多包涵

我也遇到同样的问题了，然后我发现是input标签上的readonly属性导致这种情况的发生，看了一下el-select源码，实际上它内部是用一个计算属性去控制readonly属性，在下拉框展开的时候才会取消readonly，我猜也许是取消的速度比较慢，IOS在点击的时候还是检测到readonly的存在，因此键盘无法呼出。

所以我只能用一种很暴力的方式去除这个属性（毕竟要赶着下班）仅做参考

<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强制干掉