div contenteditable="true"

2023-12-21

好吧！...我已经面对这个问题好几个小时了...

html

<div contenteditable="true" style="width: 509px; "></div>

<textarea cols="50" rows="10"></textarea>

jQuery

$('div').keyup(function(){
    $('textarea').val($(this).text());
});
$('textarea').keyup(function(){
    $('div').html($(this).val());
});

我希望无论我在

中输入什么，都会看起来as is在

原因是，我使用

作为

edit正在发生的事情是

在 div 中，

I
am
crazy.
but
your
way
of
coding
is
worst.

但在文本区域中，使用.html() in div

I<div>am</div><div>crazy.</div><div>but</div><div>your</div><div>way</div><div>of</div><div>coding</div><div>is</div><div>worst.</div>

.text() 是这样的

我疯了。但你的编码方式是最糟糕的。

真的，我不想那样......

使用 phpjs.org 的 nl2br 函数是最简单的：http://phpjs.org/functions/nl2br:480 http://phpjs.org/functions/nl2br:480

编辑（完全有效 - 已测试）

我在你的小提琴上测试了这个，它有效：

$('div').keyup(function(){
    $('textarea').val( $(this).html().replace( /<br>/g, '\n' ) );
   //$('textarea').val($(this).html()) // also not working as expected
});
$('textarea').keyup(function(){
    $('div').html( nl2br( $(this).val(), 0 ) )
});

function nl2br (str, is_xhtml) {
    // Converts newlines to HTML line breaks  
    //
    // version: 1004.2314
    // discuss at: http://phpjs.org/functions/nl2br    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Philip Peterson
    // +   improved by: Onno Marsman
    // +   improved by: Atli Þór
    // +   bugfixed by: Onno Marsman    // +      input by: Brett Zamir (http://brett-zamir.me)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Maximusya
    // *     example 1: nl2br('Kevin\nvan\nZonneveld');    // *     returns 1: 'Kevin\nvan\nZonneveld'
    // *     example 2: nl2br("\nOne\nTwo\n\nThree\n", false);
    // *     returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'
    // *     example 3: nl2br("\nOne\nTwo\n\nThree\n", true);
    // *     returns 3: '\nOne\nTwo\n\nThree\n'    
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '' : '<br>';

    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

div contenteditable="true"

div contenteditable="true" 的相关文章

随机推荐

热门标签