javascript - 有没有办法使用类似于 contenteditable 的用户提交的 textarea 值来更新 DOM？

Question

我只需要 DOM 中 textarea 的 html 标记来反映用户输入的值。（编辑：用户输入一些东西，当你点击“检查元素”时它会显示出来）

一个 contenteditable div 工作正常，但现在看来我毕竟需要一个 textarea。有人知道用javascript或html5做这件事的方法吗？

Answer 1

我想这样的事情会帮助你。它使用纯 javascript 和 html5 数据值属性：

  <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/