Question

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

我的工作已经完成，可以在您按Enter键并在文本区域内容的最后一行时成功添加项目符号

<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

但是，当您位于文本区域内容的中间并按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>

在项目区域内的每个新行中添加项目符号

1 个答案: