• ベストアンサー

フォームから入力すると、入力内容がブラウザ画面に反映する仕組み

フォームから入力すると、入力内容がブラウザ画面にテキストとして反映する仕組みを作りたいと考えています。 ただし、Web上のサーバーにアップロードせず、ローカルでhtmlファイルを開いて使用する前提です。 たとえば「クリスマス」とテキストエリアに入力してボタンを押すと、テキストがテキストエリアの下に表示され、 続いて「サンタクロース」とテキストエリアに入力してボタンを押すと、「クリスマス」の下に「サンタクロース」が表示される・・・といった次第です。 よいアイディアがあればご教授ください。

質問者が選んだベストアンサー

  • ベストアンサー
  • issa_srv
  • ベストアンサー率44% (40/89)
回答No.1

javaScritの知識が多少あれば難しくないと思います。 以下を参考にして下さい。 <html> <head> <script type="text/javascript"> <!-- function textcopy(){ // テキストエリアの内容を取得 var textarea = document.getElementById("textarea").value; // テキストエリアの内容を消去 document.getElementById("textarea").value = ""; // これまでに追加されたテキストとの連結を行う textarea = document.getElementById("insert").innerHTML + textarea; // "insert"のidが指定されたの要素の中に挿入 document.getElementById("insert").innerHTML = "<div>" + textarea + "</div>"; } //--> </script> </head> <html> <body> <form> <textarea id="textarea" rows="4" cols="40"></textarea> <p><button type="button" onclick="textcopy()">↓追加</button></p> <div id="insert"></div> </form> </body> </html>

toritan
質問者

お礼

ありがとうございます。参考にさせていただきます。

関連するQ&A