The best solution to the problem that the search function of el-select on the mobile terminal/ipad cannot pop up the soft keyboard to search

First of all, I solved this problem for a day, but it turned out that it is a small problem. Don't waste your time here, and give the solution directly: remove the readonly attribute of the drop-down box . If you understand, you can understand it naturally. You can see the specific plan at the end, first look at the process, which may help you.

<el-select placeholder="请选择产品花型"
  filterable
  id="fuck"
  v-model="flower">
  <el-option v-for="(item,index) in flowerArr"
    :key="index"
    :label="item.name"
    :value="item.id">
  </el-option>
</el-select>

  Look at the above code first, it looks like this when it becomes a component

Here is a general answer on how Baidu pops up the soft keyboard:

Will the soft keyboard pop up when the input component is focused? ? ?

fnndp！

It's not that simple, what you said is nonsense when the novice is just learning. I searched for a day, and I was looking for ways to make the input focused. Even though I thought the input was focused from the beginning, I still looked for it for a day.

To pop up the soft keyboard, there are many conditions besides the input to focus! ! ! ! ! ! !

I’m too lazy to find the specific conditions, but I found that there are two situations where the soft keyboard does not pop up when input

The first type: input is a drop-down box, but the drop-down box of element-ui is made by yourself. It is a text type input box. You can see the screenshot for this.

The second type: input has a readonly attribute, and the soft keyboard will not pop up (personal guess, disable will not pop up, test by yourself).

 

The search box of elment-ui belongs to this situation. It has a readonly by default. I don't know what the author thinks, but now I just need to remove this readonly to search. The code is as follows :

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

 

Of course it's not that simple. This component adds readonly back when blurring, so you have to remove readonly when blurring. How do you go? It's not that simple anymore. After checking the source code of the select component, I found that there is a 50 millisecond delay when blurring. The user experience is optimized. Therefore, your removal operation must be an asynchronous operation to eliminate readonly. The source code is as follows:

The final solution is as follows, just write this code in the public folder

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

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

 

Finally, let's take a look at how elment-ui handles this readonly. The source code is as follows

 I have sent an email to the official staff to inquire about the meaning of this readonly, waiting for replying. . .