Question

JsFiddle：http://jsfiddle.net/sharat87/qWCQT/

正如您可以（或不能）在上面的jsfiddle中看到的，当您点击div contenteditable元素下面的span元素时，它会失去焦点，这是正确的。但是当你使用contenteditable div元素执行同样的操作时，不会失去焦点。此外，样式为display: inline-block的{{1}}元素的行为与此方案中的span元素完全相同。

在我的应用布局中，我需要将contenteditable元素显示为inline-block。但是当点击下面给出的空白空间时它应该失去焦点，这明确地提供了失去焦点和特定于上下文的目的。我不希望contenteditable元素保持焦点。

除此之外，还没有通过javascript处理点击和blur - contenteditable元素？

Answer 1

我刚刚使用JavaScript添加了style/display property，具体取决于Browser并且有效

window.onload=function(){
    var ua=navigator.userAgent;
    var spans=document.getElementsByTagName('span');
    for(i=0;i<spans.length;i++)
    {
        if(spans[i].className=='content')
        {
            if(ua.indexOf('MSIE')!=-1) spans[i].style.display='inline-block'; 
            else spans[i].style.display='inline-table'; 
        }
    }
};

在Chrome，FF，IE8和Opera中测试过。一个example here。

与div元素不同，具有contenteditable的span元素不会自然地失去焦点

1 个答案: