0

リスクのある子供たちに次のクラスでHTMLを紹介しますが、自分のWebページを作成することがいかにクールであるかを示す時間はごくわずかです。

私がやりたいのは、子供たちがテキストといくつかの簡単なフォーマットタグで埋めることができるテキストボックスでいっぱいのページテンプレートを作成することです。更新すると、分割画面が編集結果で更新されます。

上記の目標を達成するのに役立つ、無料のオープンソースのjqueryまたはその他のjavascriptライブラリを探しています。

実際には、質問を入力しているときにプレビューボックスでstackoverflowが行うことと非常によく似ています。

他のWebサイトからコードをやみくもに持ち上げるのではなく、実際のドキュメント（または少なくとも簡単な例）を使って何かをしたいと思います。

Google検索では、他のサイトでダウンロードまたは使用できる多くのツールやものが表示されます。ここでの理想は、ページに埋め込んだライブラリと、適切と思われる位置です。

ご協力いただきありがとうございます

編集

一部の人々が指摘しているように、これは特定のイベントでdivを更新するという単純な問題です。

<script type="text/javascript">
    $(window).keyup(function(){ 
        $('#about_me_result').html($('#about_me').val());
    });
</script>


<textarea id="about_me" name="aboutMe" rows="9" cols="60">Write a little something about you...</textarea>

キーダウンは常に最後の文字を他の要素から除外するため、キーアップを使用しました。

4

3 に答える 3

1

btownが以下の返信で示唆しているように、jsfiddle.netに送信するだけで済みます。

または、そのようなものを自分のページのどこかに置きたい場合は、自分で料理することもできます。ここで遊んでください：http：//jsfiddle.net/lbstr/LD9kA/

<textarea id="code"></textarea>
<div id="result"></div>


$('#code').keyup(function(e){
    $('#result').html($(this).val());
});

または、キーアップ時に更新するのではなく、[更新]ボタンが必要な場合もあります。

<textarea id="code"></textarea>
<button type="button" id="update">Update</button>
<div id="result"></div>


$('#update').click(function(){
    $('#result').html($(this).val());
});
于 2012-05-03T22:48:38.383 に答える
1

ライブラリは本当に必要ありません。ドキュメントを更新するだけです

$(window).keydown(function(){ 

    $('#element').html($('#sometextarea').val());
});
于 2012-05-03T22:48:45.897 に答える
0

w3c Schools Tryit Editorについては、jsfiddleよりもはるかに簡単です。

唯一のことは、HTMLの更新を表示するためにボタンを押す必要があるということです。それはおそらく悪いことではありませんが、半分完成したタグと属性を入力すると、結果のWebページがすべてのキーで変更されたように狂ってしまう可能性があります。

于 2012-05-04T02:03:04.090 に答える