テキストエリア内の文字をタグで囲むと、テキストエリアの下にレンダリングされた

プレビューが表示されるようなものをJavaScriptを利用して作成したいと考えており、
サンプルコードを探しています。

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

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2007/09/13 01:02:29
  • 終了:2007/09/13 23:43:50

回答(4件)

id:Second-house No.1

Second-house回答回数388ベストアンサー獲得回数62007/09/13 03:43:51

id:tono5652

全然違うんですが。。。

2007/09/13 23:42:47
id:minkpa No.2

minkpa回答回数4178ベストアンサー獲得回数552007/09/13 04:55:14

id:tono5652

全然違うんですが。。。

2007/09/13 23:42:24
id:aside No.3

aside回答回数339ベストアンサー獲得回数312007/09/13 11:09:50

ポイント45pt

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>
id:tono5652

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

2007/09/13 23:42:57
id:GEN111 No.4

GEN111回答回数472ベストアンサー獲得回数582007/09/13 11:10:49

ポイント45pt

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

入力された内容によってはまずいことがあるかもしれません。いきなり </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>

人力検索はてな

id:tono5652

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

2007/09/13 23:43:06

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません