HTML常规text input能否保留多行输入值？

标准的<input type="text">不支持多行内容的显示与交互，这是由控件的原生设计决定的：

• 浏览器处理粘贴操作时，会自动将内容中的换行符（\n/\r）替换为空格，导致界面上显示为单行文本；
• 即使通过JavaScript强行给text input的value赋值包含换行的字符串，界面也不会渲染换行效果，只会将换行以空格形式展示；
• 用户无法通过键盘在text input中手动输入换行（按下回车会触发表单提交或控件失焦）。

如果需要保留并展示多行内容，最直接的解决方案是使用<textarea>控件：它专门为多行文本输入设计，粘贴时会完整保留原始换行格式，同时支持用户手动输入换行，无论界面显示还是提交值都会和原始内容一致。

举个实际对比：

• 粘贴以下内容到text input：

  INVOICE_500
  INVOICE_501
  

  界面显示及实际提交的内容（换行被替换为空格）：

  INVOICE_500 INVOICE_501
  

• 粘贴同样内容到textarea：
  界面显示和提交的内容都会完整保留换行：

  INVOICE_500
  INVOICE_501
  

如果非要基于text input实现“存储多行值”的需求（不推荐，体验不佳），可以通过JavaScript拦截粘贴事件，将换行符保留在value中，但界面上仍然无法显示换行，只能在提交时再将空格还原为换行——这种hack方式远不如直接使用textarea来得合理。

内容的提问来源于stack exchange，提问作者La Cooler