javascript - contenteditable に似た textarea のユーザーが送信した値で DOM を更新する方法はありますか?

Question

ユーザー入力の値を反映するために、DOM に textarea の html マークアップが必要なだけです。（編集：ユーザーが何かを入力し、「要素の検査」を押すと表示されます）

contenteditable div は正常に機能していましたが、結局テキストエリアが必要になるようです。javascriptまたはhtml5でこれを行う方法を知っている人はいますか?

Answer 1

私はこのような何かがあなたを助けると思います。純粋なjavascriptとhtml5data-value属性を使用します。

  <textarea id="myTextArea" onkeyup="this.setAttribute('data-value', this.value);" data-value=""></textarea> 

Answer 2

これは、 text() 関数を使用して、ユーザー入力から html をエスケープする必要があります。

$('textarea').on( 'blur' , function() 
{
    var textarea = $( this );
    textarea.next('span').text( textarea.val() );
});

次のマークアップを使用:

<textarea></textarea>
<span></span>​

ここのデモ: http://jsfiddle.net/UDfmm/

編集：改行を保持したい場合は、これを行います

$('textarea').on( 'blur' , function() 
{
    var textarea = $( this );
    var span = textarea.next('span');

    var content = span.text( textarea.val() ).html();
    var content_with_br = content.replace(/\n\r?/g, "<br />");

    span.html( content_with_br );

});

デモはこちら: http://jsfiddle.net/UDfmm/3/