【jQuery】textareaの入力内容を簡単にHTML↔テキスト切り替え

Tweet

メール配信システム作成にあたり、入力結果プレビューを簡単に実装できないかと色々調べた結果、jQueryを利用すれば簡単にプレビューを表示することができました。

jQueryを利用すれば、テキストメールとHTMLメールのプレビューも簡単に切り替えることができます。

まずは、サンプルをどうぞ。
【jQuery】textareaの入力内容を簡単にHTML↔テキスト切り替え｜サンプル

主な記述は下記のみで、実装できます。

<script>
$(function() {
  $('textarea[name="body"]').keyup(function() {
    if($('input[name="sort"]:checked').val() == 'html') {$('#preview_body').html($('textarea[name="body"]').val());}
    else {$('#preview_body').text($('textarea[name="body"]').val());}
  });
  $('input[name="sort"]').click(function() {
    if($('input[name="sort"]:checked').val() == 'html') {$('#preview_body').html($('textarea[name="body"]').val());}
    else {$('#preview_body').text($('textarea[name="body"]').val());}
  });
});
</script>
<table>
	<tr>
		<th>タイプ</th>
		<td>
			<label><input type="radio" name="sort" value="text">テキスト</label>
			<label><input type="radio" name="sort" value="html">HTML</label>
		</td>
	</tr>
	<tr>
		<th>本文</th>
		<td>
			<textarea name="body" cols="40" rows="20"></textarea>
		</td>
	</tr>
</table>
<div>
	<h2>本文プレビュー</h2>
	<div id="preview_body"></div>
</div>

3～6行目で textarea タグで keyup イベントが発生した際の処理を行っています。
7～10行目で input タグで click イベントが発生した際の処理を行っています。

keyup イベントの処理

$('textarea[name="body"]').keyup(function()

name 属性が body の textareaタグ で keyup イベントが発生したら { } 内の処理を行います。
keyup イベントは、キーボードのキーが押した後、離された際に呼び出されます。

4行目と5行目は、ちょっと長いので分解して説明します。

if($('input[name="sort"]:checked').val() == 'html')

まず if 文は、name 属性が sort になっている inputタグ の checked されている値（value）が html ならば { } 内の処理を行います。

$('#preview_body').html($('textarea[name="body"]').val());

id要素 が preview_body となっている HTML タグの中身を、jQuery の html 関数を使って texterea に入力されている内容に書き換えます。
html 関数は、入力されている内容を HTML として扱い出力します。

else

else は、4行目の if 文の条件に当てはまらなかった場合に { } 内の処理を行います。
（inputタグ の checked されている値（value）が html 以外の場合ですね）

$('#preview_body').text($('textarea[name="body"]').val());

id要素 が preview_body となっている HTML タグの中身を、jQuery の text 関数を使って texterea に入力されている内容に書き換えます。
text 関数は、入力されている内容を テキストとして扱い出力します。
< や > がエスケープされて、HTMLエンティティとして出力されます。

click イベントの処理

$('input[name="sort"]').click(function()

name 属性が sort の inputタグ で click イベントが発生したら { } 内の処理を行います。
click イベントは、マウスなどのポインティングデバイスでクリックされた際に呼び出されます。

8～9行目は、4～5行目と同じ処理を行っています。

もっとややこしい処理を色々入れないと、実装できないかと思ってましたがやってみると案外簡単に実装できました。
jQueryは便利な関数が色々揃ってますね。

jQueryを組む際にいつもお世話になっているサイト。
jQuery 日本語リファレンス

Tweet