ios如何自动调起键盘？

[milixie]

在ios手机上，点击某个按钮调起键盘，比如：
点击这个icon

页面直接调起键盘

该怎么办呢？

页面结构:
需要设置 contenteditable="true"

<div>
  <span id="searchIcon" @click="searchInput">🔍</span>
  <!-- form的样式：显示但是看不到，不可以使用display:none; visibility:hidden;，
可以使用 opacity: 0; 或者使用定位 top: -9999px; left: -9999px;的方式 -->
  <form action="javascript: void(0);">
        <i class="search-icon"></i>
        <input ref="search"
               id="real-search"
               type="search"
               contenteditable="true"
               @keyup.13="search()"
               v-model="searchText"
               placeholder="搜索"
               @focus="focusSearch"
               @blur="search"/>
        <i class="delete-text real-delete iconfont icon-baomingbiao_error" v-show="searching && searchText" @click="clearText"></i>
      </form>
</div>

一开始我是这样做的：

methods: {
  searchInput() {
    // 操作让正在的输入框回到视野内
    this.$refs.search.focus()
  }
}

但是在ios手机上就是不生效，安卓端没试行不行

继续想方法：
换了一种思路

在mounted 里

mounted() {
  document.getElementById('searchIcon').addEventListener('touchstart',  e => {
        e.preventDefault();
        e.stopPropagation();
        this.$refs.search.focus()
  })
}

结果就可以了

必须阻止默认行为，也不能冒泡，而且click事件是不行的。preventDefault和stopPropagation也是为了防止焦点到其他的元素上。

参考