JavaScriptを使用してフォームを印刷するときに、一部の変更されたコンテンツが有効にならないのはなぜですか？-htmlチュートリアル-php.cn

JavaScriptフォームの印刷コンテンツを更新しないという問題を解決する

ホームページ

ウェブフロントエンド

htmlチュートリアル

JavaScriptを使用してフォームを印刷するときに、一部の変更されたコンテンツが有効にならないのはなぜですか？

Linda Hamilton

Apr 04, 2025 pm 10:30 PM

css なぜ

JavaScriptを使用してフォームを印刷するときに、一部の変更されたコンテンツが有効にならないのはなぜですか？

JavaScriptフォームの印刷コンテンツを更新しないという問題を解決する

JavaScriptを使用してWebフォームを印刷する場合、ユーザーの変更されたコンテンツが印刷プレビューに反映されていないことがわかります。これは、フォームHTMLを直接取得する（たとえば.prop("outerHTML") ）リアルタイムのユーザー入力をキャプチャできないためです。たとえば、テキストボックスのコンテンツまたはチェックボックスのステータスが正しく反映されない場合があります。

問題は、HTMLを直接取得することで、動的に変更されたコンテンツをリアルタイムで更新できないことです。この問題を解決するには、 cloneNode(true)メソッドを使用してフォームノードをクローン化し、クローンノードにすべての最新のユーザー入力と状態の変更が含まれるようにする必要があります。

cloneNode(true)を使用してこの問題を解決する方法を示す改善されたコードの例を次に示します。

<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>書類</title>
<div id="divKanZhengPanel-binli">
    <div>
        <div class="checkDiv">
            <label>正しい位置</label>
            <label>外部傾斜</label>
            <label>内側の傾斜</label>
            <label>外側の隠された斜め</label>
            <label>暗黙の斜め</label>
        </div>
    </div>
</div>
<button id="dw">私をクリックして印刷してください</button>

<script>
    document.getElementById('dw').addEventListener('click', function() {
        $('#print-iframe').remove(); // 清除之前的iframe
        let iframe = document.createElement('iframe');
        iframe.id = 'print-iframe';
        iframe.style.cssText = 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility:hidden;';
        document.body.appendChild(iframe);

        let doc = iframe.contentWindow.document;
        doc.open();
        doc.write('<html><head><title>打印预览<body>');
        doc.body.appendChild(document.querySelector('#divKanZhengPanel-binli').cloneNode(true));
        doc.write('</script>

ログイン後にコピー

以上がJavaScriptを使用してフォームを印刷するときに、一部の変更されたコンテンツが有効にならないのはなぜですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1670

CakePHP チュートリアル

1428

Laravel チュートリアル

1329

PHP チュートリアル

1276

C# チュートリアル

1256

Related knowledge

HTML対CSSおよびJavaScript：Webテクノロジーの比較 Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

WordPressのソースコードをインポートする方法 Apr 20, 2025 am 11:24 AM

WordPressソースコードのインポートには、次の手順が必要です。テーマ変更のサブテーマを作成します。ソースコードをインポートし、サブトピックのファイルを上書きします。サブテーマを有効にして効果的にします。変更をテストして、すべてが機能することを確認します。

どの2025通貨交換がより安全ですか？ Apr 20, 2025 pm 06:09 PM

2025年の暗号通貨サークルの上位10の安全で信頼できる交換には、1。Binance、2。Okx、3。Gate.io（Sesame Open）、4。Coinbase、5。Kraken、6。HuobiGlobal、7。Gemini、8。Crypto.com、9。Bitfinex、10。Kucoin。これらの交換は、コンプライアンス、技術的強度、ユーザーフィードバックに基づいて、安全で信頼性が高いと評価されています。

なぜ仮想通貨価格の上昇または下落があるのですか？なぜ仮想通貨価格の上昇または下落があるのですか？ Apr 21, 2025 am 08:57 AM

仮想通貨価格の上昇の要因には、次のものが含まれます。1。市場需要の増加、2。供給の減少、3。刺激された肯定的なニュース、4。楽観的な市場感情、5。マクロ経済環境。衰退要因は次のとおりです。1。市場需要の減少、2。供給の増加、3。ネガティブニュースのストライキ、4。悲観的市場感情、5。マクロ経済環境。

フィールドをMySQLテーブルに追加および削除する手順 Apr 29, 2025 pm 04:15 PM

MySQLでは、AlterTabletable_nameaddcolumnnew_columnvarchar（255）afterexisting_columnを使用してフィールドを追加し、andtabletable_namedopcolumncolumn_to_dropを使用してフィールドを削除します。フィールドを追加するときは、クエリのパフォーマンスとデータ構造を最適化する場所を指定する必要があります。フィールドを削除する前に、操作が不可逆的であることを確認する必要があります。オンラインDDL、バックアップデータ、テスト環境、および低負荷期間を使用したテーブル構造の変更は、パフォーマンスの最適化とベストプラクティスです。

PHPフレームワークLaravelとYiiの違いは何ですか Apr 30, 2025 pm 02:24 PM

LaravelとYiiの主な違いは、デザインの概念、機能的特性、使用シナリオです。 1.Laravelは、開発のシンプルさと喜びに焦点を当てており、迅速な開発や初心者に適したEloquentormやArtisan Toolsなどの豊富な機能を提供します。 2.YIIはパフォーマンスと効率を強調し、高負荷アプリケーションに適しており、効率的なActiverCordおよびキャッシュシステムを提供しますが、急な学習曲線があります。

デジタル通貨取引アプリに簡単にアクセスできるように推奨されるトップ10（最新のランキング25） Apr 22, 2025 am 07:45 AM

gate.io（グローバルバージョン）コアアドバンテージは、インターフェイスがミニマリストであり、中国語をサポートしており、フィアット通貨取引プロセスが直感的であることです。 Binance（Simpliedバージョン）コアの利点は、世界の取引量が世界で最初であり、シンプルなバージョンモデルがスポット取引のみを保持することです。 OKX（Hong Kongバージョン）コアアドバンテージは、インターフェイスがシンプルで、広東/マンダリンをサポートし、派生取引のしきい値が低いことです。 Huobi Global Station（Hong Kongバージョン）コアアドバンテージは、それが古い取引所であり、Meta-Universe Tradingターミナルを発売することです。 Kucoin（Chinese Community Edition）コアアドバンテージは、800通貨をサポートしており、インターフェイスがWeChatの相互作用を採用していることです。 Kraken（Hong Kongバージョン）コアアドバンテージは、香港SVFライセンスを保持しており、シンプルなインターフェイスを持っている古いアメリカの交換であることです。ハッシュキーエクスチェンジ（香港ライセンス）コアアドバンテージは、香港で有名な認可された取引所であり、法律を支持しています