从剪贴板上自动粘贴onClick并拆分为多行 - JS

Question

我有一个我为几个朋友建的数据录入应用程序，我想要完成的是自动将所有数据粘贴到我的html文件中的五个单独的输入框中。

我有它工作，如果我点击任何一个输入字段，它将自动从剪贴板粘贴。我也可以右键单击并粘贴到第一个字段，然后将其拆分为所有字段。但是，我想要做的是，如果我粘贴到第一个字段，它会从剪贴板onClick粘贴并将其每行拆分为接下来的四个字段。

我该怎么做？

<script>
  async function paste(input) {
  const text = await navigator.clipboard.readText();
  input.value = text;
}
</script>

<Script>
  var strip = function(s) { return s.replace(/^\s*|\s*$/g, ''); }

//Add paste listener. In a production environment this would of course
//need the proper checks to see what's supported, old IE versions, blah blah
document.getElementById('q1').addEventListener('paste', function(e) {
    var lines = strip(e.clipboardData.getData('Text')).split(/\r?\n/);
    if (lines.length == 1) {
        return; 
    }
    for (var i = 1; i <= Math.min(5, lines.length); i++) {
        var el = document.getElementById('q'+i);
        el.value = strip(lines[i-1] || '');

        //Trigger the blur event on all input boxes, so we immediately
        //get feedback on whether the server names were valid.
        var ev = document.createEvent('HTMLEvents');
        ev.initEvent('blur', true, true);
        el.dispatchEvent(ev);
    }
    e.preventDefault();
});

//Set up validation on blur events
var inputs = document.getElementsByTagName('input');
for (var i=0; i< inputs.length; i++) {
    inputs[i].addEventListener('blur', function(e) {
        var input = e.target;
        if (input.value.match(/^[a-zA-Z0-9\.-]+$/)) {
            input.classList.remove('invalid');
            input.classList.add('valid');
        } else {
            input.classList.remove('valid');
            input.classList.add('invalid');
        }
    });
}
</Script>