formのtextareaに文字を入力した内容をリアルタイムプレビューする方法
2024/05/19
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>
関連記事
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
-
-
ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法
ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...
-
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...