如何判断 textarea 中的一行何时创建/删除？

Posted 2023-05-07

【中文标题】如何判断 textarea 中的一行何时创建/删除？

【英文标题】：How can I tell when a line in a textarea is made / deleted?

【发布时间】：2021-11-27 21:44:19

【问题描述】：

我有一个文本区域，它连接到由有序列表组成的行号，但我希望能够知道何时创建新行以及何时删除行，例如添加或删除有序列表元素使得有序列表元素的数量 对应于文本区域的行数。

我发现，每当创建新行时，都会使用回车键来执行此操作，并且当删除一行时，有时会在使用退格键时发生这种情况。

我有 textarea 的事件监听器，id 为“objtext”，如下所示：

//get the objtext element
var objtext=document.getElementById("objtext");

//detect keypress
objtext.addEventListener("keydown",(e)=>
  //detect new line
  if(e.key="Enter")
    //add an ordered list element
  
  if(e.key="Backspace")
    //check what key was deleted
    //how can this be done?    
    if("\n" was removed)
      //remove an ordered list element
    
    //and what about when a new line was removed?
    if(some text was removed such that it removes a line)
      //remove an ordered list element
    
  else if(some text was added such that it adds a line)
    //add an ordered list element
  
);

但即使我能弄明白，使用 enter 换行也只适用于新段落，比如文本溢出 textarea 到新行的时候呢？那么当退格用于删除某些单词时，它会返回一行呢？

这是怎么做到的？

【问题讨论】：

也许textarea 不适合您尝试做的事情。您能否为输入 textarea 发送一些文本示例？

为什么不计算每次更改时文本区域内容的换行符 (\n)，而不是跟踪某人按下的按钮？

【参考方案1】：

就像我在 cmets 中所说的那样，也许在每次击键时计算换行符是最简单的。

请注意，当由于textarea 内部空间不足而换行时，我们不会将换行算作换行。

const objtext = document.getElementById("objtext");

objtext.addEventListener("keyup", (event) => 
  const output = document.getElementById("output");
  const lines = event.target.value.split('\n').length;

  // now do with lines what you like
  output.textContent = `The textarea has $lines line breaks`;
);

#output 
  display: block;
  margin-top: 1rem;

<textarea id="objtext"></textarea>

<span id="output">The textarea has 0 line breaks</span>

【讨论】：

但是否有检测换行符的答案？

它确实检测到换行符。什么意思？

我的意思是在文本溢出到新行时换行。有没有办法检测到？

这应该是一个单独的问题，因为它是一个非常不同的领域。不知道用 JS 能做到多准确，但你当然可以用 CSS 做事