如何在textarea按Enter键时在光标位置插入自定义{br}标签而非末尾

实现思路 #

要实现光标位置插入自定义{br}标签，需要先阻止回车键的默认换行行为，再读取textarea当前的光标选区位置，拆分原有内容拼接标签后，再把光标定位到插入的标签之后优化输入体验。

修改后的代码 #

HTML（调整事件传参，传入完整事件对象用于阻止默认行为）

<textarea class="form-control d-inline-block ml-3 my-auto" rows="1" value="" onkeydown="tagOnInput(this, event)"></textarea>

CSS（无需修改，保留原有逻辑即可）

textarea[rows="1"] {
    overflow: auto;
    white-space: nowrap;
}

JavaScript

function tagOnInput(textField, e){
  if (e.keyCode === 13) {
      // 阻止回车默认生成换行符的行为
      e.preventDefault();
      // 读取当前光标选区的起始、结束位置
      const start = textField.selectionStart;
      const end = textField.selectionEnd;
      const val = textField.value;
      // 按光标位置拆分原有内容，中间插入{br}
      textField.value = val.slice(0, start) + '{br}' + val.slice(end);
      // 插入完成后把光标移动到{br}的后方
      textField.selectionStart = textField.selectionEnd = start + 4;
  }
}

内容的提问来源于stack exchange，提问作者Artemis