Question

我尝试在按钮中的 Vuetify textarea中添加一些文字（标签）。

<v-btn small flat @click.stop="insertTag('{{title}}', <model-name-here>)">+ Title</v-btn>

insertTag方法提供了这个：

this.$refs[model][0].focus()

我不知道如何在textarea中将文本插入光标位置...

Answer 1

Kallan DAUTRICHE的答案是正确的，但不是我所需要的（或者我认为OP需要的）。

您必须设置元素的引用，以便您可以直接选择DOM的输入元素以获取/设置选择详细信息

模板：

<v-text-field v-model="model" ref="textField">

脚本：

export default Vue.extend({
    data: () => ({
        model: "",
    }),
    methods: {
        insertText(text) {

            // Get the input element by tag name, using the ref as a base for the search
            // This is more vue-friendly and plays nicer when you duplicate components
            const el = this.$refs.textField.querySelector("input");

            // Insert text into current position
            let cursorPos = el.selectionEnd; // Get current Position
            this.model =
                this.model.substring(0, cursorPos) +
                text +
                this.model.substring(cursorPos);

            // Get new cursor position
            cursorPos += text.length;

            // Wait until vue finishes rendering the new text and set the cursor position.
            this.$nextTick(() => el.setSelectionRange(cursorPos, cursorPos));

        }
    },
});

Answer 2

在将emoji表情插入文本字段的正确位置时，我遇到了同样的问题。我找到了一个快速解决方案，但是在插入表情符号后，光标移至输入字段的末尾。也许如果您插入文本而不是本机表情符号，则不会遇到我的问题。

您必须设置元素的ID而不是其引用，因此您可以直接选择DOM的输入元素并采用属性“ selectionEnd”

<template>
    ...
    <v-text-field v-model="model" id="inputTextField">
    ...
</template>

<script/method>
   ...
   let out = <yourVariableText>
   let cursorIndex = document.getElementById('inputTextField').selectionEnd;
   out = out.substring(0, cursorIndex) + tagToInsert + out.substring(cursorIndex);
   ...
</script/method>

这是旧帖子，但我希望这个答案可以对某人有所帮助

Answer 3

 <v-textarea label="Текст сообщения" v-model="text_sms" ref="ref_text_sms"></v-textarea>

 methods: {
insert() {
  const el = this.$refs.ref_text_sms.$el.querySelector("textarea");
  let cursorPos = el.selectionEnd;
  this.text_sms = this.text_sms.substring(0, cursorPos) + "my_test" +  this.text_sms.substring(cursorPos);
  cursorPos += this.text_sms.length;
  this.$nextTick(() => el.setSelectionRange(cursorPos, cursorPos));
},

VueJS / Vuetify - 添加一些文本以在textarea上聚焦位置

3 个答案: