谷歌Chrome和javascript的问题。需要大师!

我真的不知道问题的原因是什么,因为有时铬 将 将焦点正确地放在元素上,尽管大多数时候它没有。你根本不需要请求焦点,因为当你按键时焦点不会丢失。如果你省略了 setEditFocus() 打电话给你,你应该注意到,除了Chrome,它在任何东西上都能正常工作,很明显,Chrome会因为你删除了身体中的所有内容而生气。

当你设置 contenteditable ,每个浏览器设置 innerHTML iframe文档的 body 元素不同:

Browser           | innerHTML
-----------------------------
Internet Explorer | ''
Opera             | '<br>\n'
Firefox           | '<br>'
Chrome/Safari     | '\n'

如果您不希望在以后解析内容时看到额外的内容,那么您可能希望在前面将其删除。 addFrame() .

我可以通过执行以下操作来“修复”问题:

首先,更新事件处理程序以便返回 false 并防止Opera在调用时生成HTML getSelection() 后来…

function addFrame() {
    ...
    window.iframeloaded = function() {
       ...
       if (typeof iframeDoc.addEventListener != UNDEF) {
           iframeDoc.addEventListener('keypress', keyHandler, false);
       } else if (typeof iframeDoc.attachEvent != UNDEF) {
           iframeDoc.attachEvent('onkeypress', keyHandler);
       }
    }
}

编辑:删除了原来的功能,支持下面包含的新功能

最后,返回 假 从按键处理程序修复上述Opera问题。

function keyHandler (evt) {
    var myKey=(evt.which || evt.charCode || evt.keyCode)

    if (myKey==13) {
        ...
        return false;
    }
}

我最初做过什么 syockit 建议,但我发现它在Chrome中使用插入符号大小做了一些奇怪的事情,这种方法似乎可以避免(尽管火狐仍然有点过时…)。如果你不在乎,设置 内层HTML 非空白可能更容易解决。

还要注意,您应该使用 className 而不是 class 在你传递给的对象中 new Element() 因为ie似乎认为它是一个保留字,并且说它是一个语法错误。

编辑 :在使用它之后,以下功能在IE8/firefox/chrome/safari/opera中似乎可以可靠地工作,用于更高级的测试用例。不幸的是,为了解释Opera,我确实需要包含原型的浏览器检测,因为尽管就javascript而言,所有东西看起来都是一样的,但实际的行为需要不同的代码,这些代码与其他浏览器冲突,我无法找到更好的方法来区分它们。

下面是新函数,它关注iframe的可编辑内容,并确保如果其中已有内容,插入符号将移动到该内容的末尾:

function focusEditableFrame(frame) {
    if (!frame)
        return;

    if (frame.contentWindow)
        frame = frame.contentWindow;

    if (!Prototype.Browser.Opera) {
        frame.focus();

        if (frame.getSelection) {
            if (frame.document.body.innerHTML == '')
                frame.getSelection().extend(frame.document.body, 0);
            else
                frame.getSelection().collapseToEnd();
        } else if (frame.document.body.createTextRange) {
            var range = frame.document.body.createTextRange();

            range.moveEnd('character', frame.document.body.innerHTML.length);
            range.collapse(false);
            range.select();
        }
    } else {
        frame.document.body.blur();
        frame.document.body.focus();
    }
}

更新的 设置编辑焦点() (现在不需要,但既然你已经有了它):

function setEditFocus()
{
    focusEditableFrame($(editorFrame));
}

你知道我是怎么解决这个问题的吗?在 resetContent() 替换 '' 具有 ' ' :

if (myIFrame) myIFrame.contentWindow.document.body.innerHTML=' ';

如果有效,很好。不过,不要问为什么,这可能是Range对象的WebKit故障之一,如果愿意,请提交一个bug。

很快,你能试着在send()函数的行尾添加分号吗?看看是否有效。

function send() {
  resetContent();
  setEditFocus();
}