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

朴灿烈づ我的快乐病毒、 2022-11-06 11:51 150阅读 0赞

<!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>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM3NTQ2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM3NTQ2_size_16_color_FFFFFF_t_70]: /images/20221023/63ef2663311a4ad286ecba2e57bdac06.png