勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

テキストエリアのリアルタイムプレビュー

      2014/07/03

テキストエリア内に書いた内容をリアルタイムで
プレビューする機能が必要となり、教えてもらった方法。

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$('#preview').bind('keyup change', function(){
$('#preview_area').html($("#preview").val());
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<form action="./index.php" method="post">
<textarea id="preview" style="width:200px; height:100px;"></textarea>
</form>
</td>
<td style="border:1px solid; width:200px; height:100px;" id="preview_area">
</td>
</tr>
</table>
</body>
</html>

テキストエリア内で入力したら、それを持ってきて

preview_area内に書き出すというもの。

こんなかんじになる。

http://sample.taitan916.info/preview/

あと、今調べてみるともっと詳しいのがあった。

http://logic-a.com/2012/05/16/jquery_textbox_realtime_getton/

 - JavaScript, jQuery

  関連記事

jQueryでチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

jQueryuiを用いてメールの入力補助(サジェスト)

autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...

safariのみスクロール関連のイベントが発火しない

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

javascriptでブラウザ判別&ページ遷移

var userAgent = window.navigator.userAge ...

jQueryでのやりたい事

フォーム周りをよく使うのでまとめておく。 ・テキストボックスのvalue取得、書 ...

JavaScriptでdisplay:none/blockの切り替え

jQueryだとhide/show使うか、もしくは toggleだけでいいけどJ ...

javascriptとPHPで正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...