Javascript 如何使内容可编辑div的行为类似于文本区域？

我已经构建了一个将标记转换为html的应用程序。现在我必须使用插件来调整文本区域的大小

如果我使用内容可编辑的div，我可以绕过它。但是内容可编辑div的问题是它不保留新行。每次按下回车键时，它都会插入一个新的div。这将中断将标记呈现为我的应用程序的html

有没有办法让内容可编辑div的行为与文本区域完全相同

编辑 在上面的@Mr_Green评论之后，您应该看看

正确的JS代码是：

$(function(){

  $("#editable")

    // make sure br is always the lastChild of contenteditable
    .live("keyup mouseup", function(){
      if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
        this.appendChild(document.createChild("br"));
      }
    })

    // use br instead of div div
    .live("keypress", function(e){
      if (e.which == 13) {
        if (window.getSelection) {
          var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement("br");
          range.deleteContents();
          range.insertNode(br);
          range.setStartAfter(br);
          range.setEndAfter(br);
          range.collapse(false);
          selection.removeAllRanges();
          selection.addRange(range);
          return false;
        }
      }
    });

})

)

---

您可以截取

Enter

按键，并将其替换为带有Javascript的

：

$(function(){
    
      $("#editable").keypress(function(e) {
        if (e.which == 13) {
            e.preventDefault();
            
             if (document.selection) {
                document.selection.createRange().pasteHTML("<br/>");
             } else {
                $(this).append("<br/>");
             }
        }
    });
});

$（函数（）{
$（“#可编辑”）.按键（功能（e）{
如果（e.which==13）{
e、 预防默认值（）；
if（文档选择）{
document.selection.createRange（）.pasteHTML（
）；
}否则{
$（此）。追加（“
”）；
}
}
});
});

在搜索答案但没有找到任何完全有效的答案后，我编写了自己的jQuery插件

我使用了

空白：预包装

并在回车时插入“

\n

”。这样我就可以使用

$（“div”）.text（）获取文本，而不用担心删除标记和格式化


演示：

简单答案是否定的。我最近与这两人一起工作，遇到了同样的问题：（当文本区域处于焦点时，您可能会告诉浏览器将任何“回车”视为“Shift+Enter”相反，这将使它保持在同一个分区内。@Mr_Green well这真的太糟糕了。那么使用文本区域是我唯一的选择吗？你能试试html5
contenteditable
@AkshatJiwanSharma抱歉，我误解了你的解释。这有一个解决办法。让我来解决它。
文档。选择
似乎只适用于IE.是否有跨浏览器解决方案？@Mr_Green我们可以使用Jquery，请参见我答案的编辑：）接受此答案，但我想我将使用默认文本区域。让div表现得像文本区域对我来说是不值得的。@AkshatJiwanSharma那会更好。：）@是的，我想是的！你的插件工作得很好，在我为此奋斗了一段时间后，它真的帮了我很大的忙。非常感谢。谢谢你，托尼。你真的让我开心。。。。我一直在努力解决这个问题，并最终准备编写自己的插件，但你救了我一天。