Bootstrap-vue textarea.selectionStart 为 NaN 或未定义

Question

我正在尝试检测用户何时按下 Tab 键，因此我可以插入空格，而不是移动元素焦点。

正确调用了事件处理程序，但 .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 或未定义。

Answer 1

我是 vue.js 的新手，如有错误，请见谅。

这是我经过一些测试后得到的。我用 v-on:keydown.tab 替换了 @keydown.native.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>

Answer 2

当您将 ref 附加到 <b-form-textarea> 时，您得到的是对 <b-form-textarea> 组件实例的引用，而不是您所在的 textarea 元素试图访问。参考 docs 获取更多信息。

要访问实际的 <textarea> 元素，您可以通过访问 codeInput ref 的内部 $refs 来实现，因为在幕后，textarea 元素具有一个名为 input.

的 ref

简单地说，它看起来像这样。

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

见working example

Bootstrap-vue textarea.selectionStart 为 NaN 或未定义

Bootstrap-vue textarea.selectionStart is NaN or undefined

javascript

vue.js

vuejs2

bootstrap-vue