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

}
 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值