将项目符号添加到文本区域内的每个新行

Question

我有一个文本区域，我希望用户能够在其中输入文本。文本区域中的每个新行最终都会被拆分并发送回数据库以在其他地方使用。为了从用户的角度展示这一点，我想为他们在 textarea 中输入的每一行添加一个项目符号。

我已经完成了这项工作，当您按下回车键并位于 textarea 内容的最后一行时，它成功添加了一个项目符号

<textarea onInput="handleInput(event)" rows="10"></textarea>

let previousLength = 0;

const handleInput = (event) => {
    const bullet = "\u2022";
    const newLength = event.target.value.length;
    const characterCode = event.target.value.substr(-1).charCodeAt(0);

    if (newLength > previousLength) {
        if (characterCode === 10) {
            event.target.value = `${event.target.value}${bullet} `;
        } else if (newLength === 1) {
            event.target.value = `${bullet} ${event.target.value}`;
        }
    }

    previousLength = newLength;
}

https://codepen.io/andrewgarrison/pen/vqqmMv?editors=1010

但是，当您位于 textarea 内容的中间并按 Enter 键时，我还希望它添加一个项目符号。现在它只是添加了一个没有项目符号的新行。

Answer 1

您可以在文本区域内找到当前位置，当按下回车时，添加一个新行和一个项目符号：

const bullet = "\u2022";
const bulletWithSpace = `${bullet} `;
const enter = 13;


const handleInput = (event) => {
  const { keyCode, target } = event;
  const { selectionStart, value } = target;
  
  if (keyCode === enter) {
    console.log('a');
    target.value = [...value]
      .map((c, i) => i === selectionStart - 1
        ? `\n${bulletWithSpace}`
        : c
      )
      .join('');
      console.log(target.value);
      
    target.selectionStart = selectionStart+bulletWithSpace.length;
    target.selectionEnd = selectionStart+bulletWithSpace.length;
  }
  
  if (value[0] !== bullet) {
    target.value = `${bulletWithSpace}${value}`;
  }
}

<textarea onkeyup="handleInput(event)" rows="10"></textarea>