Question

我尝试使用方法setSelectionRange更改光标在可视化v-textarea中的位置。

当我不操作由textarea的v-model属性引用的数据元素时，它会很好地工作。但是，如果我尝试先更改主体，然后再应用setSelectionRange方法；光标直接移动到文本的结尾。

我附上了一个简化版本的代码段。在文本区域中的任意位置按退格键后，光标应移动到索引2 ；但它会移到文本结尾。

但是，如果您删除this.body并再次退格，则它和平地移至索引2。

new Vue({
  el: '#app',
  data: {
    body: ''
  },
  created () {
    this.body = 'I am initial body. Hit backspace on somewhere if you want!'
  },
  methods: {
    onBackspaceOrDeleteButtonKeydown (event) {
      // disable default behavior
      event.preventDefault()
      
      let bodyTextArea = this.$refs.pourBody.$el.querySelector('textarea')
      
      // COMMENT OUT THE NEXT LINE TO SEE THE CURSOR MOVES TO INDEX 2 ALWAYS
      this.body = 'I am changed body. My cursor should have moved to index 2 anyways, but it goes to the end like >'
      bodyTextArea.setSelectionRange(2, 2)
    }
  }
})

<!DOCTYPE html>
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-textarea 
            ref="pourBody"
            outline
            v-model="body"
            auto-grow rows="7"
            @keydown.delete="onBackspaceOrDeleteButtonKeydown"
          ></v-textarea>

        </v-container>
      </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
</body>

</html>

setSelectionRange显然不喜欢身体变化。

我该如何解决？

Answer 1

除了givehug的解决方案你还可以做

this.$nextTick(() => {
   bodyTextArea.setSelectionRange(2, 2))
})

Vuetify-更改模型时如何使setSelectionRange（int，int）在v-textarea中工作

1 个答案: