Question

所以我想出了如何使用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。
将setTimeout添加到解决方案2.不成功：文本选择由不受信任的超时事件触发。

我想要太多吗？

Answer 1

如果您的DOM元素没有焦点，您将无法setSelectionRange。在您的codepen中，它确实（并且您可能应该使用focus事件而不是mouseup），但是当安装组件时，它不会。

更新：这通常有效，但显然不适用于IOS。 This page说：

如果元素没有，
setSelectionRange将无法在iOS上运行焦点。还要注意任何围绕给文本的东西输入焦点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>

如何在iOS Safari中显示组件并将键盘焦点设置到其输入字段？

1 个答案: