The remote search using el-select on the ios mobile terminal (mobile phone, ipad) cannot arouse the soft keyboard

Solution: Remove the readonly attribute of the drop-down box.

insert image description here
This component adds readonly back when blurring, so you have to remove readonly when blurring. After checking the source code of the select component, it is found that there is a 50 millisecond delay in user experience optimization when blurring, so the removal operation must also be an asynchronous operation.

<el-form-item label="检测型号" size="small" prop="testModel">
  <el-select
    filterable
    ref="select"
    @blur.native.capture="onblur"
    @hook:mounted="cancalReadOnly"
    @visible-change="cancalReadOnly"
    :popper-append-to-body="false"
    v-model="ruleForm.testModel"
    placeholder="请选择型号"
  >
    <el-option
      v-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|iOS
          this.$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')
          }
        })
     }
}

Guess you like

Origin blog.csdn.net/Min_nna/article/details/125180495