リアルタイムプレビューのサンプル
いきなりですがサンプル
↓
ここに上で入力した内容がリアルタイムで入ります。
ソースコードは続きから。
ソースコード
<textarea id="inputTxt" style="height:8em;width:100%;"></textarea>
<div id="targetArea" style="border:1px solid #999;">ここに上で入力した内容がリアルタイムで入ります。</div>
<script type="text/javascript" src="http://kzms2.com/jQuery/jquery-latest.min.js"></script>
<script type="text/javascript">//< ![CDATA[
//お決まりの文
jQuery(document).ready(function($){
//idが「#inputTxt」のところで、キーボードを押し終わった時に
$('#inputTxt').keyup(function(){
//「#targetArea」に、this（「#inputTxt」）のvalueを入れる
$('#targetArea').text($(this).val());
});
})
//]]></script>
いくつか注意とか説明
なんとなくな説明
- jQueryを用いて実装しています。
- タグは無効です。有効にするには「$(‘#targetArea’).text($(this).val());」を「$(‘#targetArea’).html($(this).val());」にしてください。
ただし、ページ崩れたりするのでお勧めは出来ないかもです。 - キーボードを用いない入力のリアルタイムプレビューは今回対応していません。
たいしたことはまったくしていませんが、こんな感じでjQueryを用いればリアルタイムのプレビューを簡単に作れちゃったりします。
応用編はまたの機会にっ
