Question

Firefox会在按下输入时插入<br />标记，而其他浏览器会添加<p>或<div>。我知道chrome和safari正在插入contentEditable div的第一个孩子的相同标签。 Firefox也是如此，如果第一个标签的innerHTML是空的，那么firefox只是忽略标签并通过推送第二行中的默认节点创建一个新行，并直接在编辑器内部而不是在子节点内部写入。所以基本上，我希望Firefox在给定标签内写入并继续在每次按下时插入那种节点。怎么做到呢？有什么建议？

Answer 1

我找到了解决方案:)为了使这项工作成功，你必须给插入符号的父元素一个id。然后，您可以使用以下代码。请注意，我从c＃获取了browsernName并将其放入隐藏字段。这就是为什么我把它等同于“firefox”。以下代码使用FF 3.6进行测试，效果很好。唯一的事情是你必须检查插入符的父元素，如果它不等于当前行的id，那么你必须使用选择函数将插入符放在当前行中。此外，在keyup事件上执行此代码，并确保如果您在keyup事件上执行其他一些代码，请将此代码放在其末尾！ Anways，享受：）

// The code works good in the following cases:
// 1) If there is text inside the editor and the user selects the whole text
//    and replace it with a single character, the <p> tag will be placed and the
//    text will place inside the p tag
// 2) If the user selects the whole code and deletes it and begins to type again
// 3) If the user types normally and press enter 
// NB: Please note me if you find any bug

if (browserName == "firefox") {
    //remove all br tags
    var brs = txteditor.getElementsByTagName("br");
    for (var i = 0; i < brs.length; i++) { brs[i].parentNode.removeChild(brs[i]); }
    //check whether there is a p tag inside
    var para = txteditor.getElementsByTagName("p");
    if (para.length == 0) {
        var inner = txteditor.innerHTML.replace(/^\s+|\s+$/g, '');
        var str = (inner == "") ? "&#8203;" : txteditor.innerHTML;
        var nText = "<p id=\"" + cRow + "\">" + str + "</p>";
        // in order to prevent a dublicate row clear inside the text editor
        txteditor.innerHTML = "";
        document.execCommand('insertHTML', false, nText);
    } else {
        // always make sure that the current row's innerHTML is never empty
        if (document.getElementById(cRow).innerHTML == "")
            document.getElementById(cRow).innerHTML = "&#8203;";
    }
}

Answer 2

尝试在元素中插入<p></p>。然后几乎可以肯定每一个换行都是一个新的段落。

Answer 3

如果将contenteditable元素更改为<span>而不是<div>，则新行将以<br>开头。我没有用其他元素对此进行过测试，但是观察不同元素的行为方式会很有趣。

可以使用<span>设置display: block元素的样式，使其看起来像<div>元素。

contentEditable - Firefox <br/>标签

3 个答案: