TEXT書き込み

2023-08-212024-10-22

↓↓↓ スライドできます ↓↓↓

[metaslider id=”2357″]

以下は、「TEXTの書き込み」のコード例です。このコードは、テキストデータを入力し、それをテキストファイルとしてダウンロードできるウェブアプリケーションの例です。コードとその説明を示します。

このHTMLコードは、テキストを入力するためのテキストエリアと、テキストをダウンロードするためのボタンを提供しています。テキストエリアは id="textInput" で、4行×50列のサイズと “Enter text here…” というプレースホルダーテキストを持っています。

このJavaScriptコードは、以下の機能を提供します：

ページが読み込まれたときに、テキストエリア（id=”textInput”）とダウンロードボタン（id=”downloadButton”）の要素を取得します。
ダウンロードボタンがクリックされたとき、テキストエリアからテキストデータを取得します。
テキストデータをテキストファイルとしてエンコードし、それをBlob（バイナリデータ）として作成します。エンコーディングはUTF-8で行われます。
ダウンロード用のリンク（<a>要素）を動的に作成し、Blobデータをそのhref属性に設定します。また、ダウンロード時のファイル名を “text.txt” に設定します。
リンクをクリックして、テキストファイルがダウンロードされます。

CopyCode


    <!DOCTYPE html>

    <html>

    <head>

        <title>Text File Writing Example</title>
    </head>

    <body>

        <div>

            <h2>Enter Text</h2>

            <textarea id="textInput" rows="4" cols="50" placeholder="Enter text here..."></textarea>
            
        </div>
    
        <button id="downloadButton">Download Text File</button>
    
        <script src="script.js"></script>
    </body>

    </html>


　（今回は空ファイルです。）


    document.addEventListener("DOMContentLoaded", function() {

        var textInput = document.getElementById("textInput");

        var downloadButton = document.getElementById("downloadButton");
    
        downloadButton.addEventListener("click", function() {

            var text = textInput.value;

            var blob = new Blob([text], { type: "text/plain;charset=utf-8;" });
            
            var link = document.createElement("a");

            link.setAttribute("href", URL.createObjectURL(blob));

            link.setAttribute("download", "text.txt");

            link.click();

        });
    });