vue.js -добавить заполнитель в текстовое поле одним нажатием кнопки


vue.js -добавить заполнитель в текстовое поле одним нажатием кнопки

13.10.2020 05:17:44 Просмотров 28 Источник

У меня есть текстовое поле

<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>

Когда пользователь вводит текст и в промежутке между ними, если он нажимает кнопку Добавить имя, {имя} должно быть помещено в текстовое поле (где когда-либо находится курсор). Как я могу это реализовать?

У вопроса есть решение - Посмотреть?

Ответы - vue.js -добавить заполнитель в текстовое поле одним нажатием кнопки / vue.js - Add a placeholder in text box with click of a button

Является ответом!
Hiws

13.10.2020 05:25:13

Вы можете добавить ref в свою текстовую область и получить доступ к свойству selectionStart, которое содержит размещение курсора. Затем вы можете использовать этот индекс для соединения данного текста с текстом textarea в заданной позиции.

И поскольку нажатие кнопки потеряет фокус ввода, вы можете добавить его обратно, вызвав метод focus в ref, а также установив 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;
      });
    }
  }
});
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.17.3/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.17.3/dist/bootstrap-vue.css" rel="stylesheet" />

<div id="app">
  <b-form-textarea ref="my-textarea" v-model="text" placeholder="Certification text" rows="5" max-rows="6">
  </b-form-textarea>
  <b-btn variant="primary" size="lg" @click="addName">
    Add Name
  </b-btn>
</div>

Помочь в развитии проекта:
Закрыть X