覆盖由 contentEditable 创建的内部 html答案

【问题标题】：override inner html created by contentEditable覆盖由 contentEditable 创建的内部 html
【发布时间】：2011-03-31 12:04:19
【问题描述】：

我正在用 html+js 编写一个类似 Soulver 的应用程序。我需要从输入（突出显示）自定义文本。对于使用<div contenteditable="true"></div> 输入的即时消息，每次在 div 中输入后都会出现新的 div。我如何分配给它 id。或者用 \n 覆盖所有内部 div，就像在 textarea 中一样。有什么想法吗？

【问题讨论】：

标签： javascript jquery html contenteditable

【解决方案1】：

在每个keyup 之后，您可以循环遍历divs 并将attr 添加到它们：

        $('#your-editable-div').live('keyup', function() {
            $(this).children('div').each(function(index) {
                $(this).attr('id', 'element-'+index);
            });
        });

【讨论】：

【解决方案2】：

需要注意的是 contentEditable 不是 contenteditable。 IE7 因这个原因而中断。

您是否在 Mac 上的 Firefox 中进行测试？ Chrome 和 Safari 没有同样的问题。

您可以检测到 Enter 键，然后停止默认操作。然后你可以插入任何你想要的东西，而不是浏览器特定的东西。

使用 jQuery（未经测试）

//prevent users from typing on datepickers
 $("body").delegate('[contentEditable="true"]', "keypress", function(event)
 {
    //detect and override enter key press
    if(event.which==8)
    {
        event.preventDefault(); /* stop default */
        /* More code to insert something at the mouse location */
    }
 });

查看这个问题了解如何在光标位置插入
Contenteditable text editor and cursor position

【讨论】：