javascript - 如何使组件出现并在iOS Safari中将键盘焦点设置为其输入字段？

所以我想出了如何使用e.target.setSelectionRange(0, 999)使ios选择文本：

    onUp(e){
      e.preventDefault() // By default, on mouse up the caret is placed between characters. That has to be negated.
      e.target.setSelectionRange(0, 999) // Set the selection to (what is likely) all the text in the input field.
    }

  <input @mouseup="onUp" v-model="input"/>

https://codepen.io/kslstn/pen/ZvoEQa
但是，这只适用于受信任事件：直接影响用户输入的事件（https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted）。当用户单击请求时，我想显示最初隐藏的Vue组件。当它出现时，该组件中的输入字段应该被选中。
我尝试了以下方法：
当组件出现（在组件的mounted（）上）时，执行setSelectionRange。不起作用，因为它不是可信任的事件（我想）。
让调用我的组件的click事件通过查找组件的id来设置对该组件的选择。这将是一个丑陋的解决方案，因为它无法清晰地分离我的组件。它也不起作用，因为在单击时，组件不在DOM中，并且无法找到输入字段的ID。
向解决方案2添加setTimeout。没有成功：文本选择是由不可信超时事件触发的。
我想要太多吗？

最佳答案

如果dom元素没有焦点，就无法setSelectionRange。在您的代码笔中，它确实是（而且您可能应该在那里使用focus事件，而不是mouseup），但是当安装组件时，它不是。
更新：这工作一般，但显然不在iOS上。This page说：
setSelectionRange如果元素没有
集中。也要注意，任何围绕给出文本的东西
输入焦点is highly unreliable
在移动Safari上。
链接说：
从ios 5开始，由综合单击事件触发的处理程序是
允许触发对输入元素的关注。尝试更新后的FastClick input focus example。
因此，我们可能需要在输入上合成一个click事件来获得焦点。
更新（再次）：可能最好的方法是选择focus上的文本。我已经相应地更新了代码。如果focus以编程方式工作，则当组件出现时将选择文本；否则，当您点击字段时将选择文本。

new Vue({
  el: '#app',
  data: {
    showing: false
  },
  components: {
    autoSelected: {
      data() {
        return {
          text: 'hi there'
        }
      },
      mounted() {
        this.$refs.input.focus();
      },
      methods: {
        selectText(e) {
          e.target.setSelectionRange(0, 9999);
        }
      }
    }
  },
  methods: {
    showIt() {
      this.showing = true;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <button @click="showIt">Show it</button>
  <auto-selected v-if="showing" inline-template>
    <input ref="input" v-model="text" @focus="selectText">
  </auto-selected>
</div>

关于javascript - 如何使组件出现并在iOS Safari中将键盘焦点设置为其输入字段？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48205349/