テキストエリアのリアルタイムプレビュー
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/
関連記事
-
-
highcharts.jsについて
プログラムの作りかえを行う際、既存のソースで highcharts.jsを使って ...
-
-
safariのみスクロール関連のイベントが発火しない
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
-
-
JavaScriptでUNIXタイムスタンプ取得
UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...
-
-
jQueryプラグインを作成する方法
jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...
-
-
jQueryで偶数or奇数行にclassを付与
やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...
-
-
chardin.jsを利用して注釈を入れる
簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...
-
-
簡単にtable内をソート
やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...
-
-
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
-
-
プラグインを使用せず、jQueryでオートページャー
プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...
-
-
javascriptで月末日を取得
以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...
- PREV
- XHTMLをPHPファイルで取り扱う際の注意点
- NEXT
- ガラケーorスマフォ判別