Question

好的！...我现在面对这几个小时......

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());
});

我想要的是，无论我在＆lt; div＆gt;中输入什么内容，都会在＆lt; textarea＆gt;中看起来像那样反之亦然......但我被卡住了...... please see my Fiddle for what I mean...

原因是，我正在使用＆lt; div＆gt;作为＆lt; textarea＆gt;的替代... ...因为＆lt; div＆gt;的滚动条很容易自定义而不是＆lt; textarea＆gt; ...但是如果你可以看到，当你按回车键时，contenteditable div会包含另一个div。 ..

修改发生了什么，

中的

，

我
是
疯狂。
但

编码
你
方式
是
最差

但在textarea中，在div中使用.html()

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（）就像这样

我疯了。但你的编码方式最差。

真的，我不希望那样......

5 个答案:

答案 0 :(得分：3)

答案 1 :(得分：1)

答案 2 :(得分：0)

答案 3 :(得分：0)

答案 4 :(得分：0)

Answer 1

最简单的方法是使用phpjs.org的nl2br函数： 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');
}

Answer 2

此代码适用于Firefox：

$(document).ready(function(){ 
  $('div').keydown(function(){
    $('textarea').val($(this).html().replace(/<br>/g,"\n"));
  });

  $('textarea').keydown(function(){
    $('div').html($(this).val().replace(/\n/g,"<br>"));
  })
});

然后，如果您使用Opera，浏览器会将换行符设为<p>....</p>。 Reigel可能使用的IE可能会添加<div>...</div>个标签。似乎在DIV标签满足时如何处理换行符没有真正的标准方法。

Answer 3

或许试试看this question？他尝试与服务器通信的情况略有不同，但我认为答案应该类似。

此代码之前由Gert G发布，但似乎已经消失。下面的代码似乎完美无缺，所以在这个代码上代表Gert G.

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

  $('textarea').keydown(function(){
    $('div').html($(this).val().replace(/\n/g,"<br />"));
  })

Answer 4

我认为必须是这样的：

$('div').keyup(function(e){ 
   $('textarea').val($(this).text().replace('<br>',/\r\n/ig)); 
}); 
$('textarea').keyup(function(e){ 
        $('div').html($(this).val().replace(/\r\n/ig, '<br>')); 
});

Answer 5

你可以做两件事：
您可以使用nobr标签
您还可以添加样式属性：

<div style="display:inline;"></div>

div contenteditable =“true”

5 个答案: