Bootstrap-vue textarea.selectionStart имеет значение NaN или не определено - PullRequest
Новая
       14

Bootstrap-vue textarea.selectionStart имеет значение NaN или не определено

0 голосов
/ 27 марта 2019

Я пытаюсь определить, когда пользователь нажимает клавишу табуляции, поэтому я могу вставить пробелы вместо смещения фокуса элемента.

Обработчик события вызывается правильно, но значение свойств .selectionStart и .selectionEnd либо не определено, либо равно NaN. Что-то не так с моим кодом? 

<b-form-textarea
    id="pythonCodeInput"
    placeholder="Write Python code here..."
    v-model="newQuestion.objects.code"
    ref="codeInput"
    @keydown.native.tab="keyDownInTextarea">
</b-form-textarea>

Соответствующий код из keyDownInTextarea 

let codeInput = this.$refs.codeInput;

// Add 4 spaces
let tabSize = 4;
let tabPosition = codeInput.selectionStart;
let textWithSpaces = codeInput.value.substring(0, tabPosition);
for (let i = 0; i < tabSize; i++) textWithSpaces += " ";
textWithSpaces += codeInput.value.substring(tabPosition);

Я ожидаю, что tabPosition будет иметь значение, показывающее, где находится курсор, но фактический результат равен NaN или не определен.

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

Когда вы присоединяете ref к <b-form-textarea>, вы получаете ссылку на экземпляр компонента <b-form-textarea>, а не на элемент textarea, к которому вы пытаетесь получить доступ.Обратитесь к документам для получения дополнительной информации.

Чтобы получить доступ к фактическому элементу <textarea>, вы можете сделать это, открыв внутренний $refs вашего codeInput ссылки, так как он находится под капотом,элемент textarea имеет ссылку под названием input.

Проще говоря, это будет выглядеть следующим образом. 

// this is a reference to the `<b-form-textarea>` component instance.
let codeInput = this.$refs.codeInput; 

// get the actual DOM element
const textArea = codeInput.$refs.input;

См. рабочий пример

0 голосов
/ 27 марта 2019

Я новичок в vue.js, так что извините, если я что-то не так.

Вот что я получил после некоторого тестирования. Я заменил @keydown.native.tab на v-on:keydown.tab, и это, кажется, работает без проблем. 

new Vue({
	el: 'textarea',
  methods: {
  	test: (e) => {
    	console.log(e.target.selectionStart);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<textarea
  id="textarea"
  v-on:keydown.tab="test" ></textarea>
...