0

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

上記の jsfiddle でわかる (または見えない) ように、div要素の下をクリックするとcontenteditable、フォーカスが失われます。spanしかし、 の要素で同じことを行うと、フォーカスが失わcontenteditableれません。また、divスタイルを持つ要素は、このシナリオdisplay: inline-blockの要素とまったく同じように動作します。span

私のアプリのレイアウトでは、contenteditable要素を として表示する必要がありinline-blockます。ただし、以下に示す空のスペースをクリックすると、フォーカスを失う必要があります。これは、フォーカスを失うことと、コンテキスト固有の目的のために明示的に提供されています。contenteditable要素にフォーカスを保持させたくありません。

クリックを処理してJavaScriptを介しblurて要素を処理する以外に、これを回避する方法はありますか?contenteditable

4

1 に答える 1

1

style/display propertyに応じてJavaScriptを追加したところ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 でテスト済み。ここに例があります。

于 2012-12-06T17:28:05.467 に答える