如何将TextArea中Excel粘贴的换行数值批量填入number类型输入框？

没问题，我来帮你搞定这个需求！你的核心目标是把从Excel粘贴到TextArea里的换行分隔数值，分别填入对应的50个number输入框，咱们先看看原代码里的核心问题：

• 你直接把整个TextArea的内容转成了单个数字，没有按换行符拆分每一行的数值
• 循环给所有输入框赋值同一个值，没有对应到每一行的单独数值

接下来咱们一步步修正代码：

核心思路 #

1. 按换行符拆分TextArea的内容，处理掉可能的空行或多余空格（Excel粘贴经常带这些）
2. 将每一行的内容转成有效的数字，过滤掉非数字的无效内容
3. 把处理后的数字数组，依次对应到每个number输入框（自动匹配你现有的50个输入框数量）

修正后的完整代码 #

// 获取触发按钮
const btn = document.querySelector(".btn--shift");
// 获取存放粘贴内容的TextArea
const inputInArea = document.querySelector(".btn--input");
// 获取所有number类型的输入框
const numberInputs = document.querySelectorAll('input[type="number"]');

btn.addEventListener("click", function(e) {
    e.preventDefault();
    
    // 1. 拆分并清洗TextArea内容：按换行分割，去空格，过滤空行
    const rawLines = inputInArea.value.split('\n')
        .map(line => line.trim()) // 去掉每行前后的空格/制表符
        .filter(line => line);    // 过滤掉空行
    
    // 2. 把每行内容转成有效数字，过滤无效内容
    const numbers = rawLines.map(line => {
        const num = parseFloat(line);
        // 只保留能转成有效数字的内容，排除NaN
        return isNaN(num) ? null : num;
    }).filter(num => num !== null);
    
    // 3. 依次给每个输入框赋值，自动匹配输入框数量
    numberInputs.forEach((input, index) => {
        // 有对应数字就赋值，没有就清空输入框
        input.value = numbers[index] ?? '';
    });
    
    // 可选：控制台打印调试信息，方便排查问题
    console.log("处理后的有效数字数组：", numbers);
});

代码细节说明 #

• 内容拆分：split('\n')精准识别Excel粘贴的换行分隔，trim()处理Excel可能带的多余空格/制表符，filter自动去掉空行
• 数字转换：用parseFloat比parseInt更灵活，支持小数输入；isNaN过滤掉不小心粘贴的非数字内容
• 赋值逻辑：通过index一一对应数字数组和输入框，??空值合并运算符确保没有对应数字时输入框保持清空状态
• 边界适配：不管粘贴的行数是少于还是多于50，都会自动适配——少于50时剩下的输入框清空，多于50时只填前50个

这样就能完美实现你想要的功能啦！

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