Question

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

事件处理程序已正确调用，但是.selectionStart和.selectionEnd属性的值均为undefined或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的新手，所以对不起，如果发现问题，抱歉。

这是经过一些测试后得到的。我用@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>

Answer 2

将ref附加到<b-form-textarea>时，得到的是对<b-form-textarea>组件实例的引用，而不是您尝试的textarea元素的引用访问。参考 SwiftValidator了解更多信息。

要访问实际的<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;

请参见docs

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

2 个答案: