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

问题描述

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

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

让previousLength = 0;const handleInput = (事件) =>{const bullet = "\u2022";const newLength = event.target.value.length;const characterCode = event.target.value.substr(-1).charCodeAt(0);if (newLength > previousLength) {如果(字符代码 === 10){event.target.value = `${event.target.value}${bullet} `;} else if (newLength === 1) {event.target.value = `${bullet} ${event.target.value}`;}}以前的长度 = 新长度；}

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

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

解决方案

可以在文本区域内找到当前位置，按下回车后，追加新行和项目符号:

const bullet = "\u2022";const bulletWithSpace = `${bullet}`;常量输入 = 13;const handleInput = (事件) =>{const { keyCode，目标} = 事件；const { selectionStart, value } = target;如果(keyCode === 输入){console.log('a');target.value = [...value].map((c, i) => i === selectionStart - 1?`\n${bulletWithSpace}`: C).加入('');控制台日志(目标值)；target.selectionStart = selectionStart+bulletWithSpace.length;target.selectionEnd = selectionStart+bulletWithSpace.length;}如果(值 [0] ！== 子弹){target.value = `${bulletWithSpace}${value}`;}}

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

I have a textarea that I want users be able to input text in. Each new line within the textarea will eventually get split up and sent back to the database to be used elsewhere. To show this from a users perspective, I want to add a bullet to each new line that they enter within the textarea.

I've got this working to the point where it successfully adds a bullet when you press enter and are on the last line of the textarea content

<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

However, I'd also like for it to add a bullet when you are in the middle of the textarea content and you press enter. Right now it just adds a new line with no bullet.

解决方案

You can find the current position within the text area, and when enter is pressed, append a new line and a bullet:

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>

这篇关于将项目符号添加到文本区域内的每个新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！