人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

テキストエリア内の文字をタグで囲むと、テキストエリアの下にレンダリングされた
プレビューが表示されるようなものをJavaScriptを利用して作成したいと考えており、
サンプルコードを探しています。

出来るだけシンプルなものを希望します。よろしくお願いします。


●質問者: tono5652
●カテゴリ:ウェブ制作
✍キーワード:JavaScript エリア コード シンプル タグ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Second-house
●0ポイント

http://help.adobe.com/ja_JP/GoLive/9.0/help.html?content=WSa285f...

◎質問者からの返答

全然違うんですが。。。


2 ● minkpa
●0ポイント

http://fnya.cocolog-nifty.com/blog/2007/01/javascript_0973.html

◎質問者からの返答

全然違うんですが。。。


3 ● aside
●45ポイント

http://q.hatena.ne.jp/answer

testタグで囲まれた部分がテキストエリアの下に出力される

<script type="text/javascript">
<!--
function test() {
 var val = document.getElementById("input").innerText;
 var start = val.indexOf("<test>");
 var end = val.indexOf("</test>");
 if (start >= 0 && end >=0) {
 document.getElementById("result").innerHTML = 
 val.substring(start,end);
 }
}
// -->
</script>
<body onload="test()">
<textarea id="input" cols="100" rows="5" onkeyup="test()"><test>aaa</test>aaaa</textarea>
<div id="result"></div>
</body>
◎質問者からの返答

ありがとうございます。試してみます。


4 ● GEN111
●45ポイント

テキストエリアの内容を表示エリアにコピーするだけのコードです。

入力された内容によってはまずいことがあるかもしれません。いきなり </div> とか </html> とかを入れても表示上は大丈夫なようですが。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
 <script type="text/javascript">
 function showPreview() {
 var html = document.getElementById('text').value ;
 /*
 必要なら html に変換処理を入れる
 */
 document.getElementById('preview').innerHTML = html ;
 }
 </script>
 </head>

 <body>
 <form>
 <textarea id="text" cols="60" rows="20" onkeyup="showPreview()"></textarea>
 </form>
 <div id="preview" style="border : dashed 1px ; padding : 1ex ;"></div>
 </body>
</html>

人力検索はてな

◎質問者からの返答

ありがとうございます。試してみます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ