前端小白爬坑记（一）：TextArea文本域换行问题记录

前端

2023-12-26 09:43:49

TextArea 文本域中的换行难题

前端工程师的道路上，我们经常会遇到各种各样的难题。今天，我们来探讨一个看似简单却让我折腾了好一阵子的问题——TextArea 文本域的换行。

TextArea 简介

TextArea 是 HTML 中的一种文本输入域，允许用户输入多行文本。不同于 <input type="text">，TextArea 可以容纳任意数量的行。当用户在 TextArea 中按 Enter 键时，文本会自动分行。

换行难题

问题出现了，当我们希望在 TextArea 中手动输入换行符时，事情变得复杂了。如果 TextArea 中没有内容，我们可以直接输入换行符。但是，如果 TextArea 中已有内容，在光标所在行的末尾输入换行符却不会产生预期效果。

解决方案

解决这个问题的方法有很多，我们逐一探索：

1. 字符拼接

最简单的思路是对现有文本和新输入文本进行字符拼接，然后将其赋值给 TextArea 的 value 属性。不幸的是，这种方法只在 IE 浏览器中有效，其他浏览器不支持。

2. 样式调整

我们可以使用样式来解决这个问题。通过设置 overflow-y: auto;、resize: vertical; 和 line-height: 40px;，我们可以让 TextArea 出现滚动条和调整大小的控件，从而在文本溢出时保持可读性。但是，这种方法会导致屏幕随之滚动，在需要输入大量文本时，会给用户带来不便。

3. 直接输入

令人惊讶的是，TextArea 实际上支持直接输入换行符。我们可以在 TextArea 中添加 onkeydown 事件监听器，在用户按下回车键时插入换行符。

<TextArea id="TextArea" onkeydown="if(event.ctrlKey||event.altKey){if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}}else{if(event.keyCode==13){event.keyCode=0;event.returnValue=false;document.selection.createTextRange().text="\r\n";}};

不过，在光标停留在文本域最后一行时，按回车键不会有换行符，而是会新建一行。为了解决这个问题，我们还可以添加以下代码：

if(window.event.srcElement.value.length ==window.event.srcElement.value.replace("\r\n","").length){document.selection.moveStart("character");}

4. JavaScript

我们还可以使用 JavaScript 来实现文本域的换行功能。在 TextArea 上添加一个 onkeydown 事件监听器，当按下回车键时，插入换行符。

function insertLineBreak(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
    var textarea = document.getElementById("TextArea");
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    textarea.value = textarea.value.substring(0, start) + "\n" + textarea.value.substring(end);
    textarea.selectionStart = textarea.selectionEnd = start + 1;
  }
}

document.getElementById("TextArea").addEventListener("keydown", insertLineBreak);