Js 实现 Excle 多行文本框赋值功能

本文链接：https://blog.csdn.net/qq_36537546/article/details/114577232

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行输入框赋值</title>
    <div th:include="public/public_include" />
</head>
<body>
    <div>
        <div style="margin-top: 10%;;line-height: 3">
            <textarea style="margin: 0px;height: 242px;width: 354px;"></textarea><br>
            年龄：<input type="text" id="demo1" value="" style="width: 150px"><br>
            姓名：<input type="text" id="demo2" value="" style="width: 150px"><br>
            地址：<input type="text" id="demo3" value="" style="width: 150px"><br>
            爱好：<input type="text" id="demo4" value="" style="width: 150px"><br>
        </div>
    </div>
</body>
<script>
    $('#demo1').on('paste', function(e) {
        var pastedText = undefined;
        var name = document.getElementsByTagName('input');
        if (window.clipboardData && window.clipboardData.getData) {
            // IE
            pastedText = window.clipboardData.getData('Text');
        } else {
            pastedText = e.originalEvent.clipboardData.getData('Text');
        }
        var arr = pastedText.split("\n");
        if (arr.length == 0) {
            return;
        }
        setTimeout(() => {
            for (var i = 0; i < arr.length; i++) {
                var line = arr[i];
                if (line.trim() == "") {
                    continue;
                }
                document.getElementById(name[i].id).value = line.trim();
            }
        })
    });
</script>
</html>

效果图