el-select在移动端/ipad上搜索功能不能弹出软键盘进行搜索的问题最佳解决方案

首先这个问题我解决了一天，但结果发现他是个小问题，这里先不浪费大家时间，直接给解决方案：去除下拉框的readonly属性即可。懂的自然懂，具体方案可以看最后，先看下过程，可能对你有帮助。

  先看上面这段代码，变成组件的时候是这样的

这里先给出百度如何弹出软键盘的通用回答：

input组件被focus的时候就会触发软键盘弹出？？？

fnndp！

哪有那么简单，你说的那是新手刚学的时候的废话。我找了一天，都在找如何使得input被focus的方法，即使我从一开始就认为input已经被focus了，但我还是找了一天。

要弹出软键盘，除了input要focus之外，还有很多条件！！！！！！！

具体有哪些条件我懒得找，但是我发现有两种情况input不会弹出软键盘

第一种：input是下拉框，然而element-ui的下拉框是自己做的，他本身是一个text类型的输入框，这个可以看截图。

第二种：input有readonly属性，也不会弹出软键盘（个人猜测，disable也弹不出来，自己测）。

 

elment-ui的搜索框就是属于这种情况，他默认有个readonly，我不知道作者是怎么想的，但现在我只要去掉这个readonly就可以搜索了。代码如下：

document.getElementById('fuck').removeAttribute('readOnly')

 

当然没那么简单，这个组件在blur的时候又把readonly加回去了，因此在blur的时候你还得把readonly去了，怎么去呢？又没那么简单了，经过我查select组件的源码，发现blur的时候有50毫秒的延迟用户体验优化，因此你的去除操作也得是个异步操作，才能消除readonly，源码如下：

最终解决方案如下，只要在公共文件夹里写上这段代码即可

Array.from(document.getElementsByClassName('el-select')).forEach((item) => {
      item.children[0].children[0].removeAttribute('readOnly')
      item.children[0].children[0].onblur = function () {
        let _this = this
        setTimeout(() => {
          _this.removeAttribute('readOnly')
        }, 200)
      }
    })

————————————————————————————

 

最后我们来看一下elment-ui是怎么处理这个readonly的，源码如下

 我已经发邮件给官方人员询问这个readonly的意义了，等待回复ing。。。