使用 JavaScript 打印表单时，如何获取表单元素的真实值？
在使用 javascript 打印表单时，可能会遇到修改后某些表单元素不起效的情况，如 textarea 内容无法显示或复选框不呈现选中状态。
原因是获取元素内容时使用的是 outerHTML，该方法会返回元素及其子元素的 HTML 标记代码，但其中不包含表单元素的实际值。
修改方法如下：
使用 cloneNode 方法克隆原表单元素，该方法能复制元素及其内容的副本，从而获取表单元素的真实值。
修改后的代码：
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 打印表单时，如何获取表单元素的真实值？的详细内容，更多请关注其它相关文章！