如何在一次粘贴中将多个值粘贴到多个表单输入中？答案

【问题标题】：How to paste multiple values into multiple form inputs in one paste?如何在一次粘贴中将多个值粘贴到多个表单输入中？
【发布时间】：2017-12-26 17:22:00
【问题描述】：

说我复制

1 2 3 4

然后选择一个输入字段，当我粘贴它时，它会自动将 1 放入第一个字段，2 放入第二个字段，3 放入第三个等等。

复制的值将用空格、逗号或制表符分隔。

表单是简单的 html，我使用 PHP 插入数据库，无论解决方案是什么语言都可以。如果它存在，我会对其 jQUery 进行映像，甚至将我引导至相关的 jQuery 插件。

【问题讨论】：

字段在哪里？你试过什么？ Stackoverflow 不是免费的代码编写服务。您应该展示您的代码尝试解决您自己的问题，并且人们会帮助您修复您的代码。还需要验证数据长度不超过可用字段的详细信息
字段无关紧要，什么都没试过，因为除了谷歌搜索深奥的短语之外我不尝试什么，我不认为它是免费的代码服务，也不期待代码。由于前面提到的原因，我的代码在这里是无关紧要的。我敢肯定，没有人会嫉妒正确的方向。我确定我需要的这个东西有名字。
从学习如何拆分字符串开始。网上有很多关于如何做这部分的资源

标签： php jquery html forms

【解决方案1】：

我已经逐行注释了代码，希望这就足够了。我必须去上班，到了那里我会做任何澄清的修改。

$(function(){
  //run this on dom ready
  $('.paste-me').on('paste', function(e){
    //add the paste event to all of the paste-me classes
    var data1 = e.originalEvent.clipboardData.items[0];
    //get the data transfer item of hte original clipboard data event.
    if(data1.kind == 'string' && data1.type=='text/plain'){
    //If it is a string and text/plain, move forward
      e.stopPropagation();
      //Stop the propagtion of this event
      data1.getAsString(function(s){
      //get the string contents of the clipboard item.
        s = s.split('\t');
        //split it by spaces
        $('.paste-me').each(function(i,item){
          //loop through each .paste-me item
          $(item).val( s[i] || '');
          //set the value from the split array, or an empty string if someone copy/pastes something too small to put a value in each item
        });
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="paste-me" name="paste_me[]" type="text"/>
<input class="paste-me" name="paste_me[]" type="text"/>
<input class="paste-me" name="paste_me[]" type="text"/>
<input class="paste-me" name="paste_me[]" type="text"/>

2020 年编辑

由于 jQuery 已基本不再使用，取而代之的是 Angular、Vue 或 React 等框架，我觉得这个答案需要一些更新。

下面是一个 100% Vanilla JS 版本，可以使用给定的 HTML。从逻辑上讲，它遵循与上述相同的步骤，我只是重命名了一些变量以提高可读性。如果您有任何问题，请随时提出。

document.addEventListener('DOMContentLoaded', () => {
  const pasteMes = document.querySelectorAll('.paste-me');
  pasteMes.forEach(input => {
    input.addEventListener('paste', e => {
      const data = e.clipboardData.items[0];
      if(data.kind == 'string' && data.type == 'text/plain') {
        data.getAsString(str => {
          str.split(/\s/).forEach((v, ind) => {
            pasteMes[ind] && (pasteMes[ind].value = v || '');
          })
        });
      }
    });
  });
});

<input class="paste-me" name="paste_me[]" type="text"/>
<input class="paste-me" name="paste_me[]" type="text"/>
<input class="paste-me" name="paste_me[]" type="text"/>
<input class="paste-me" name="paste_me[]" type="text"/>

【讨论】：

嘿，谢谢您的回答，只是一个简单的问题，我正在尝试使用制表符进行分隔，但似乎 '\t' 似乎不起作用。
@AasimAzam 我访问了一个谷歌电子表格并在1 2 3 4 中写入（写入4 个不同的单元格），将split(' ') 更改为split('\t')，它按预期工作。
我尝试从 excel、工作表和简单文本文件中粘贴，但无济于事。不知道我做错了什么
@AasimAzam 我也不知道——这真的很奇怪。我刚刚用一个 excel 文件中的文本对其进行了测试，得到的结果与我从谷歌表中得到的结果相同。您使用什么操作系统？也许与它有关。
我使用的是 Windows 10

【解决方案2】：

使用标记器来完成此操作，然后在您需要的元素中设置值（通常存储在数组中）。

【讨论】：