如何通过在文本区域中的当前行末尾按空格来转到下一行

Posted 2023-03-06

【中文标题】如何通过在文本区域中的当前行末尾按空格来转到下一行

【英文标题】：How to go to next line by pressing space at end of the current line in textarea

【发布时间】：2015-02-14 04:48:10

【问题描述】：

我的 textarea 设置了这两个相关的样式属性：

white-space: pre-wrap;
word-wrap: break-word;

我想要实现的功能是，当用户按下空格按钮足够多次以到达文本区域的右边缘时，我希望光标移动到下一行。

【问题讨论】：

如果已经在最后一行，怎么能转到下一行？行来自回报。

这是 chrome 中 textarea 的一种奇怪行为（也许其他浏览器也是如此）.. 当你在行尾时，你不能通过输入空格来换行。不知道为什么有人会想要那个，这听起来很愚蠢。

如果你想进入下一行，为什么不按[enter]呢？我只是想了解要求和限制

这样的应用会是什么？

刚刚测试过，带有 contenteditable 的 div 非常适合这个。它不会在表单中工作，你必须自己通过js提取文本。

【参考方案1】：

我做了“用 JS 破解”...这很简单：

var keypress = function(event)
  var textarea = event.target;
  var content = textarea.value;
  var cols = textarea.cols + 1;
  if(content.length % cols === textarea.cols) textarea.value += '\n'; 
, textareas = document.getElementsByTagName('textarea');
for(var t = 0; t < textareas.length; t += 1)
  var textarea = textareas[t];
  textarea.addEventListener('keyup', keypress);
  textarea.addEventListener('keydown', keypress);

textarea 
  white-space: pre-wrap;
  word-wrap: break-word;

<textarea cols="20" rows="10"></textarea>