Firefox 下的 focus() 没有按预期工作？

Question

我试图阻止用户在 contentedtiable 元素上写字。为此，我正在检索插入符号的父容器并检查它是否是 ID 为 dnd-textarea 的文本区域。

以下代码在 Chrome 上运行良好，但在 Firefox 上失败。 preventWritingOnTextArea() 的日志输出显示，在 Firefox 下，父级没有更改，但仍然是 dnd-textarea，而不是 ID 为 newId 的 InlinePanel。

private native Node getCaretParent() /*-{

    var target = null;

    if($wnd.getSelection) {
        target = $wnd.getSelection().getRangeAt(0).commonAncestorContainer;
        return ((target.nodeType===1) ? target:target.parentNode);
    }
    else if($doc.selection) {
        target = $doc.selection.createRange().parentElement();
    }

    return target;
}-*/;

在我的 textarea 的 onKeyPress() 方法中，我检查 carret 是否尝试在上面写字。如果是这样，我会分支到preventWritingOnTextArea() 以防止这种情况发生。

@Override
public void onKeyPress(KeyPressEvent event) {

    Node parent = getCaretParent();

    GWT.log("Caret parent: " + parent);

    if(parent == textarea.getElement()) {                       
        preventWritingOnTextArea();         
    }           
}

preventWritingOnTextAread() 方法应该添加一个新的InlinePanel 并通过在这个新面板上设置焦点来从文本区域移除焦点。恕我直言，这只能意味着 focus() 无法按预期在 Firefox 上运行和/或执行其他操作。

private void preventWritingOnTextArea() {

    GWT.log("preventWritingOnTextArea()");

    InlineLabel textWrapper = new InlineLabel();

    int pos = getCursorPosition(textarea.getElement());

    if(pos == 0) {
        textarea.getElement().insertFirst(textWrapper.getElement());
    } else {
        textarea.getElement().appendChild(textWrapper.getElement());
    }

    String newId = "wrap-"+(nextId++);

    // Tried that too but this loses the focus completely under Firefox.
    //textarea.getElement().blur();

    textWrapper.getElement().setId(newId);
    textWrapper.getElement().focus();   

    Node parent = getCaretParent(); 
    Element newParent = parent.cast();  
    GWT.log("New parent " + newParent.getId());
}

我怎样才能在 Firefox 下进行这项工作，是的.. 所有其他浏览器也是如此..

是的，我曾尝试先在textarea 上设置blur()，然后将焦点重新设置在textWrapper 上，但效果不佳。

Answer 1

好吧，Firefox 不想按照它应该的工作方式来做。我现在的解决方案是标记新的span 元素（显然是空的）的文本以真正获得焦点。这很丑陋，但我们又在这里谈论网络开发，对吧？感谢@TimDown for this answer。

private void preventWritingOnTextArea() {

    GWT.log("preventWritingOnTextArea()");

    InlineLabel textWrapper = new InlineLabel();

    // ...

    textWrapper.getElement().setId(newId);
    textWrapper.getElement().focus();

    // Firefox didn't want to play with us.
    markText(textWrapper.getElement());
}

private native void markText(Element element) /*-{

    win = $wnd;
    var doc = win.document, sel, range;

    if (win.getSelection && doc.createRange) {      
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(element);
        sel.removeAllRanges();
        sel.addRange(range);

    } else if (doc.body.createTextRange) {      
        range = doc.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    }       
}-*/;