勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

formのtextareaに文字を入力した内容をリアルタイムプレビューする方法

   2024/05/19  jQuery JavaScript

textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。以下にサンプルとソースコードをメモ。

 

サンプル

https://taitan916.info/sample/preview/

 

ソースコード

<table>
    <tr>
        <td valign="top">
            <div>入力エリア</div>
            <textarea id="preview" style="width:200px; height:100px;"></textarea>
        </td>
        <td>
            <div>プレビューエリア</div>
            <div id="preview_area" style="border:1px solid; width:200px; height:100px;"></div>
        </td>
    </tr>
</table>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    $(`#preview`).on(`keyup change`, function(){
        let text = $(`#preview`).val()
        text = text.replace(/(\n|\r)/g, `<br>`);
        $(`#preview_area`).html(text);
    });
});
</script>

 - jQuery JavaScript

  関連記事

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...