当前位置: 代码迷 >> Web前端 >> firefox中iframe焦点丢失有关问题
  详细解决方案

firefox中iframe焦点丢失有关问题

热度:121   发布时间:2012-11-06 14:07:00.0
firefox中iframe焦点丢失问题

场景与问题:


查看 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);
    }

}
?

?

  相关解决方案