iView UI 获取 textarea 光标位置后追加内容，若光标前后有内容则换行显示

需求

在 textarea 当前光标位置处追加内容，如果当前光标前后还有内容则自动换行。

属性

• HTMLInputElement： selectionStart 属性，表示所选文本的起始索引。当未选择任何内容时，则返回 <input> 元素内部文本输入光标（插入符号）的位置。

步骤

• 获取光标位置：currentArea.selectionStart
• 拼接字符串
• 重新填入 textarea

实现

<template>
  ...
  <div>
    <Input id="myArea" type="textarea" v-model="content" :rows="8" />
    <Button @click="insert">插入文本</Button>
  </div>
</template>

// 获取插入内容后的回调函数
getInsertText(insertText){
  if(this.content === ""){
    this.content = insertText;
    return;
  }
  let currentArea = document.getElementById('myArea').getElementsByTagName("textarea")[0];//获取当前 textarea
  let cursorIndex = currentArea.selectionStart; // 获取光标位置，第 0 个字符到选中的字符;
  // 获取光标前的内容
  this.frontString = currentArea.value.substring(0, cursorIndex);
  // 获取光标后的内容
  this.afterString = currentArea.value.substring(cursorIndex, this.content.length);
  let currentAfterStr = this.afterString;
  let currentFrontStr = this.frontString;
  // 如果光标前不以换行符结束，则拼接一个换行符
  if(!this.frontString.endsWith("\n")){
    currentFrontStr = `${this.frontString}\n`;
  }
  // 如果光标后不以换行符开始，则拼接一个换行符
  if(!this.afterString.startsWith("\n")){
    currentAfterStr = `\n${this.afterString}`;
  }
  this.content = `${currentFrontStr}${insertText}${currentAfterStr}`;
}

END