textarea元素中wrap="hard"属性未按预期生效的原因？

问题原因 #

wrap="hard" 属性仅在表单提交时，才会将文本框中自动换行的位置插入实际的换行符（\n），并不会实时修改 textarea.value 的内容。所以直接读取 value 时，只会得到没有自动换行的单行文本。

解决方案 #

以下几种方式可以满足你的需求：

1. 表单提交时获取带换行的内容
   如果你是通过表单提交数据，只要 textarea 带有 name 属性（你的代码中已设置），表单提交后后端就能收到包含自动换行的完整文本，无需额外处理。

2. 前端实时计算换行并插入换行符
   若需要在前端实时获取带换行的文本，可以通过 JavaScript 手动计算文本在指定列数下的换行位置，插入 \n。修改你的代码如下：

   // 计算带换行的文本
   function getWrappedText(textarea) {
     const cols = textarea.cols;
     const text = textarea.value;
     const lines = [];
     let currentLine = '';
     const words = text.split(' ');
   
     for (const word of words) {
       // 检查当前行加新单词是否超过列数限制
       if ((currentLine + word).length > cols) {
         lines.push(currentLine.trim());
         currentLine = word + ' ';
       } else {
         currentLine += word + ' ';
       }
     }
     // 加入最后一行
     if (currentLine) lines.push(currentLine.trim());
     return lines.join('\n');
   }
   
   // 更新显示函数
   function showTextareaContent() {
     var textarea = document.getElementById('usrtxt');
     var displayArea = document.getElementById('textareaContent');
     displayArea.innerText = getWrappedText(textarea);
   }
   
   // 绑定事件和初始化
   document.getElementById('usrtxt').addEventListener('input', showTextareaContent);
   showTextareaContent();
   

3. CSS 同步显示效果
   如果只是需要展示区域的文本和 textarea 显示一致，不需要修改 value，可以给展示的 div 设置与 textarea 一致的样式：

   #textareaContent {
     width: 100px;
     font-family: monospace; /* 保证字体宽度一致，换行位置匹配 */
     white-space: pre-wrap;
     word-wrap: break-word;
   }
   

内容的提问来源于stack exchange，提问作者hamilton.lima