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

Question

我有一个 textarea，我希望用户能够在其中输入文本。 textarea 中的每个新行最终都会被拆分并发送回数据库以在其他地方使用。为了从用户的角度显示这一点，我想为他们在 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

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

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>