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

IT技术 javascript html reactjs
2021-04-30 16:38:30

我有一个 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 键时，我还希望它添加一个项目符号。现在它只是添加了一个没有项目符号的新行。

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>

其它你可能感兴趣的问题
上一篇Highcharts 不渲染：React+Typescript+Highcharts 下一篇对象和 console.log 的奇怪行为