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>
関連記事
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...
-
-
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...
-
-
jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...