firefox中iframe焦点丢失问题

最新推荐文章于 2024-06-26 09:32:03 发布

原创最新推荐文章于 2024-06-26 09:32:03 发布 · 446 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Firefox

rte fantasy 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何解决Firefox浏览器中iframe布局动态改变后导致的不可编辑、光标消失及选中区域丢失的问题。通过提供代码实例，展示了如何使用ckeditor插件进行修复。

场景与问题：

查看 demo：ff-iframe-bug

初始状态下 iframe 中的内容可编辑，可选中，当动态改变 iframe 的 position（即改变 layout ）后，该 iframe 出现三个问题：

1. 不可编辑

2. 光标消失

3.原先选中区域（光标位置）丢失

分析与修复：

想不到一向稳重的 firefox 也会有这么折磨人的 bug，还好 ckeditor 已有完美解决方案，从纷繁芜杂的代码丛中理出来就是：

1.不可编辑，就重新设一遍 contentEditable

2.光标消失就绕一下：先由其它可获得焦点的元素获得焦点，然后 iframe 窗体以及 body 再获得焦点，最后惊奇发现光标回来了！不过到了编辑区最后 ....

3.丢失就要多保存：操作前保存选中区域以及光标位置(range)，操作后再把保存的 range 设置回去。

查看demo：ff-iframe-fix

代码实例：

var savedRange = null;

//保存选择区域以及光标位置
function save() {
    var sel = win.getSelection();
    if (sel) {
        savedRange = sel.getRangeAt(0);
    }
}

function show() {

    if (UA.gecko) {
        //激活编辑与光标
        body.contentEditable = false;
        body.contentEditable = true;
        a[0].focus();
        win.focus();
        body.focus();

        //范围回复
        var sel = win.getSelection();
        sel.removeAllRanges();
        sel.addRange(savedRange);
    }

}