这个问题我之前做表单工具的时候也踩过坑，Firefox对<input type="text">的换行处理确实很严格——粘贴带换行的文本时，浏览器会自动把换行符过滤掉，导致你用value属性拿不到原始的多行内容。不过不用慌，咱们可以通过拦截粘贴事件直接从剪贴板拿原始文本，完美绕开这个限制，而且不需要换成textarea，具体方案如下：

核心思路：监听粘贴事件，直接读取剪贴板内容 #

单行input的默认粘贴行为会自动移除换行，但我们可以通过paste事件拦截这个操作，直接从剪贴板数据源里获取完整的带换行文本，再拆分填充到对应的输入框中。

实现代码示例 #

假设你的10个input有类似这样的结构：

<input type="text" id="input-1">
<input type="text" id="input-2">
<!-- ... 直到input-10 -->

对应的JavaScript代码：

// 获取第一个输入框和所有文本输入框的集合
const firstInput = document.getElementById('input-1');
const allTextInputs = document.querySelectorAll('input[type="text"]');

// 监听第一个输入框的粘贴事件
firstInput.addEventListener('paste', function(e) {
  // 阻止默认粘贴行为，避免浏览器自动过滤换行
  e.preventDefault();
  
  // 从剪贴板获取原始文本内容
  const clipboardContent = e.clipboardData.getData('text');
  
  // 拆分文本为行，兼容Windows(\r\n)和Unix(\n)的换行格式
  // 同时过滤掉可能的空行
  const textLines = clipboardContent.split(/\r?\n/).filter(line => line.trim() !== '');
  
  // 将每行内容填充到对应的输入框中
  textLines.forEach((lineContent, index) => {
    // 确保不超出我们的10个输入框范围
    if (allTextInputs[index]) {
      allTextInputs[index].value = lineContent;
    }
  });
});

为什么这个方法有效？ #

因为当你粘贴文本时，浏览器的剪贴板里保存的是完整的原始内容（包含换行符），而Firefox只是在把内容写入input的value时过滤了换行。我们通过paste事件直接读取剪贴板的text类型数据，就能拿到未被修改的多行文本，之后拆分填充就顺理成章了。

这个方案在Firefox、Chrome、Edge等主流浏览器都能正常工作，完全满足你不用textarea的需求。

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