如何将多行电话号码分别粘贴到Google Sheets中Bootstrap 5表单的多个输入框

该功能完全可以实现，通过监听输入框的粘贴事件解析剪贴板内容即可完成自动填充，操作步骤如下：

• 第一步：给你的7个电话号码输入框设置唯一ID，建议使用phone1、phone2……phone7的命名规则，方便后续代码调用。
• 第二步：在用户窗体的HTML代码中插入以下JavaScript代码，监听第一个输入框的粘贴行为：

// 监听第一个手机号输入框的粘贴事件
document.getElementById('phone1').addEventListener('paste', function(e) {
  // 阻止默认粘贴到单个输入框的行为
  e.preventDefault();
  // 读取剪贴板内的纯文本内容
  const pasteContent = (e.clipboardData || window.clipboardData).getData('text');
  // 按换行拆分内容，过滤空行后截取最多7条数据
  const phoneNumbers = pasteContent.split(/\r?\n/)
    .map(item => item.trim())
    .filter(item => item.length > 0)
    .slice(0, 7);
  // 依次填充到对应输入框
  phoneNumbers.forEach((phone, index) => {
    const inputEl = document.getElementById(`phone${index + 1}`);
    if (inputEl) inputEl.value = phone;
  });
});

• 第三步：测试效果，复制7行逐行排列的电话号码，粘贴到第一个输入框中，即可自动填充到对应输入位。

可选优化 #

如果需要支持从任意输入框开始粘贴、从当前位置往后填充，可以使用以下通用监听代码：

// 给所有手机号输入框绑定粘贴事件
document.querySelectorAll('[id^="phone"]').forEach(inputEl => {
  inputEl.addEventListener('paste', function(e) {
    e.preventDefault();
    const pasteContent = (e.clipboardData || window.clipboardData).getData('text');
    const phoneNumbers = pasteContent.split(/\r?\n/)
      .map(item => item.trim())
      .filter(item => item.length > 0);
    // 获取当前输入框的序号
    const currentIndex = parseInt(this.id.replace('phone', '')) - 1;
    // 从当前输入框开始往后填充
    phoneNumbers.forEach((phone, offset) => {
      const targetIndex = currentIndex + offset + 1;
      const targetEl = document.getElementById(`phone${targetIndex}`);
      if (targetEl) targetEl.value = phone;
    });
  });
});

注意事项 #

• 如果你的输入框ID使用其他命名规则，对应修改代码中的ID选择器即可
• 若需要自动格式化手机号（去除空格、横杠等非数字字符），可以在赋值时增加格式处理逻辑，示例：inputEl.value = phone.replace(/\D/g, '')

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