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

Question

说我复制

1 2 3 4

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

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

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

Answer 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"/>