HTML - 2个元素同时聚焦

时间:2013-12-23 15:15:40

标签: javascript html5 contenteditable tinymce-4

我稍微改写了TinyMCE编辑器,以便更好地满足我的需求。 我想要做的其中一个更改是字体大小输入 - 没有选择而是直接输入,您可以在其中写入您想要的任何值。 我开始尝试TextBox,但是有一个问题。 当我进入该文本框时,编辑器中的选择将丢失,因此任何更改都不会应用于任何内容。 是否有可能如何访问文本框而不会失去编辑器中的焦点或其他一些解决方法?

Dialog不是可能的,因为它完全超越了简单的目的。

感谢您提前获得任何建议。

2 个答案:

答案 0 :(得分:0)

不,这样做是不可能的,但你可以用一些javascript + css重新停止这个功能。这可能有点棘手,所以我建议将其留待以后再进一步研究你正在开发的实际功能。

答案 1 :(得分:0)

您可以尝试保存选择,然后在用户完成输入后将其恢复。

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

确保在选择更改时通过调用saveSelection来保存选择:

document.getElementById("editor").onmouseup = function () {
    tinyRange = saveSelection();
}
document.getElementById("btn").onclick = function(){
    restoreSelection(tinyRange); 
    document.getElementById("editor").focus();
}

看看这个jFiddle:http://jsfiddle.net/SpacePineapple/5QLDT/