Question

如果你曾经在ipad上使用过contenteditable div，你会发现blur事件没有被注册。

下面的答案提供了一个快速黑客。

Answer 1

这个答案来源于此：https://gist.github.com/shimondoodkin/1081133 基本上，我们创建一个输入元素，可以正确地记录模糊并将焦点更改为它然后模糊它，只要有可能的div应该模糊。我已经调整了shimondoodkin的解决方案以完美地工作，并且输入元素的正确定位使得页面在尝试聚焦输入元素时不会突然滚动。

if(/AppleWebKit\/([\d.]+)/.exec(navigator.userAgent)) {
    function getPos(el) {
      for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent) return {x: lx,y: ly};
    }

    var refocus_prevtarget = null, inp = ce("input", "", document.body); inp.setAttribute("tabIndex","-1"); inp.style.cssText = "width:1px; height:1px; border:none; margin:0; padding:0; position:fixed";
    function refocusContentEditable(e) { 
        var curelement=getEvtSrc(e);
        if(refocus_prevtarget) { // if we have a previous element
            // if previous element was contentEditable and the next isn't then:
            if(refocus_prevtarget.contentEditable == 'true' && curelement.contentEditable !== 'true') {
                var p = getPos(refocus_prevtarget); inp.style.left = p.x; inp.style.top = p.y; // change the position of the input element to near the last elem
                inp.focus(); inp.blur(); // set caret focus to input el that handles blur correctly
                curelement.focus(); // focus the wanted element
            }
        }
        refocus_prevtarget=curelement;
    }
    aeh(document.body, "touchend", refocusContentEditable); // add global click handler
}

模糊ipad上的contenteditable div

1 个答案: