代码之家 › 专栏 › 技术社区 › Reigel Gallarde

DIV contentEditable=“真”

html jquery

Reigel Gallarde · 技术社区 · 15 年前

可以!…我要面对这个好几个小时…

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

我希望无论我在<div>中键入什么,都能显示如在<文本区域>中,反之亦然…但我被卡住了… please see my Fiddle for what I mean...

原因是,我正在使用<DIV>替换<TEXTARIA>…因为<DIV>的滚动条比<TEXTARIA>更易于自定义…但如果您能看到,当您按Enter键时,ContentEditable DIV将包括另一个DIV…

编辑发生的是,

在DIV中,

我
是
疯子。
但是
你的
方式
属于
编码
是
最差的。

但在文本区域,使用 .html() 在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()如下所示

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

真的,我不想…

5 回复 | 直到 15 年前

Kerry Jones 15 年前

最好使用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');
}

Gert Grenander Keiron Lowe 15 年前

此代码适用于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可能会使用,可能会添加这些 <div>...</div> 标签。当DIV标记为ContentEditable时,似乎没有真正的标准方法来处理换行符。

Community CDub 8 年前

试着看看 this question 也许?与他试图与服务器通信时的情况稍有不同,但我认为答案应该类似。

这段代码以前是由GertG发布的,但似乎已经消失了。下面的代码似乎工作得很完美,所以请向GERT G报告这一点。

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

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

Reigel Gallarde 15 年前

我想一定是这样的:

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

user2921779 11 年前

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

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