使用 JavaScript 打印表单时，如何获取表单元素的真实值？-html教程-PHP中文网

使用 JavaScript 打印表单时，如何获取表单元素的真实值？

DDD

发布： 2024-11-10 15:54:24

原创

395人浏览过

使用 JavaScript 打印表单时，如何获取表单元素的真实值？

在使用 javascript 打印表单时，可能会遇到修改后某些表单元素不起效的情况，如 textarea 内容无法显示或复选框不呈现选中状态。

原因是获取元素内容时使用的是 outerHTML，该方法会返回元素及其子元素的 HTML 标记代码，但其中不包含表单元素的实际值。

修改方法如下：

使用 cloneNode 方法克隆原表单元素，该方法能复制元素及其内容的副本，从而获取表单元素的真实值。

修改后的代码：

立即学习“Java免费学习笔记（深入）”；

let docHtml1 = ''
docHtml1 += $('#divKanZhengPanel-binli').cloneNode(true).prop('outerHTML');

登录后复制

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="divKanZhengPanel-binli">
    <div>
        <input type="text">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <div class="checkDiv">
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="正位"><label>正位</label>
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="外显斜"><label>外显斜</label>
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="内显斜"><label>内显斜</label>
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="外隐斜"><label>外隐斜</label>
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="内隐斜"><label>内隐斜</label>
        </div>
    </div>
</div>
<button id="dw">点我打印</button>
<script>
    document.getElementById('dw').addEventListener('click', function () {
        $('#print-iframe').remove(); // 每次打印前移除先前生成的元素
        // 开始打印
        let iframe1 = document.createElement('IFRAME');
        let doc1 = null;
        iframe1.setAttribute('id', 'print-iframe');
        iframe1.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility: auto;');
        document.body.appendChild(iframe1);
        setTimeout(function () {
            doc1 = iframe1.contentWindow.document;
            doc1.body.appendChild(document.querySelector('#divKanZhengPanel-binli').cloneNode(true));
            doc1.close();
            iframe1.contentWindow.focus();
            iframe1.contentWindow.print();
        });
    });

</script>
</body>
</html>

登录后复制

以上就是使用 JavaScript 打印表单时，如何获取表单元素的真实值？的详细内容，更多请关注php中文网其它相关文章！