Vue Inpute Textarea supports tab-typing and appending content after the input cursor

There is a need to support TAB key input in the Textarea

In the browser, however, the default TAB key automatically focuses on the next element that can be focused. The idea is to prevent the default event from getting the cursor position in the input when the TAB key is received, and add a \t TAB input after it to get the focus

The following code

<el-form-item label="Event Name">
  <el-input
    id="myinput"
    type="textarea"
    v-model="form.content"
    :autosize="{minRows:9,maxRows:9}"
    @keydown.9.native.prevent="tabFunc"
    ref="inputVal"></el-input>
</el-form-item>
Copy the code

insertInputTxt (id, insertTxt) {
    var elInput = document.getElementById(id)
    var startPos = elInput.selectionStart
    var endPos = elInput.selectionEnd
    if (startPos === undefined || endPos === undefined) return
    var txt = elInput.value
    var result = txt.substring(0. startPos) + insertTxt + txt.substring(endPos) elInput.value = result elInput.focus() elInput.selectionStart = startPos +  insertTxt.length elInput.selectionEnd = startPos + insertTxt.length }, tabFunc () {console.log(111)
    this.insertInputTxt('myinput'.'\t')},Copy the code

InsertInputTxt reference segmentfault.com/q/101000001… Thank you