vue.js-单击按钮在文本框中添加占位符

问题描述

我有一个文本框

<div>
   <b-form-textarea
   id="textarea"
   v-model="text"
   placeholder="Certification text "
   rows="5"
   max-rows="6"
   ></b-form-textarea>
</div>  

和两个按钮

<b-button variant="primary" class="btn btn-primary btn-lg top-right-button mr-1">Save</b-button>
<b-button variant="info" class="btn btn-info btn-lg top-right-button mr-1">Add Name</b-button>

在用户键入内容时以及在两次单击之间（如果单击添加名称）按钮{name}，都应放置在文本框中（光标所在的位置）。 我该如何实施？

解决方法

您可以将Warning message in r[i] = solve(matrix(unlist(sigma_list[i]),ncol = k)): "le nombre d'objets à remplacer n'est pas multiple de la taille du remplacement" Warning message in r[i] = solve(matrix(unlist(sigma_list[i]),ncol = k)): "le nombre d'objets à remplacer n'est pas multiple de la taille du remplacement" 添加到文本区域，并访问ref属性，该属性包含光标的位置。 然后，您可以使用该索引在给定位置将给定文本拼接到文本区域的文本中。

由于单击按钮将失去输入的焦点，因此可以通过在引用上调用selectionStart方法并设置focus和selectionStart来重新添加输入光标就是它停在的地方。

selectionEnd

new Vue({
  el: "#app",data() {
    return {
      text: ""
    };
  },methods: {
    addName() {
      const { text } = this;
      const textarea = this.$refs["my-textarea"].$el;
      const index = textarea.selectionStart;
      const name = "{name}";

      this.text = `${text.substring(0,index)}${name}${text.substring(
        index
      )}`;
      textarea.focus();
      setTimeout(() => {
        textarea.selectionStart = index + name.length;
        textarea.selectionEnd = index + name.length;
      });
    }
  }
});