2012-12-06 4 views
0

JsFiddle에게 DIV 요소와는 달리, 자연스럽게 초점을 잃지 말고 : http://jsfiddle.net/sharat87/qWCQT/스팬 요소

당신이 div 요소 아래에 클릭 할 때 (또는 할 수없는) 위의 jsfiddle에서 볼 수 있듯이 contenteditable과 함께, 그것은 초점을 잃고, 정당하게 그렇게 잃는다. 그러나 요소가 contenteditable 인 동일한 작업을 수행하면 포커스를 잃지 않습니다. 또한 div 스타일의 요소 인 display: inline-block은이 시나리오에서 span 요소와 똑같이 동작합니다.

내 앱의 레이아웃에서 요소가 inline-block으로 표시되어야합니다. 그러나 초점을 잃고 컨텍스트 특정 목적을 위해 명시 적으로 제공되는 아래 빈 공간을 클릭하면 포커스가 손실됩니다. contenteditable 요소에 포커스 유지를 원하지 않습니다.

아무렇지도 않게이 부분을 클릭하면 처리가 어렵고 blur-요소가 javascript를 통해 전달됩니까?

답변

1

난 그냥 Browser에 따라 자바 스크립트 style/display property를 추가했습니다 그것은 크롬, FF, IE8과 오페라에서 테스트

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

을했다. example here.

+0

네, 그게 문제를 해결하는 것 같습니다. 'inline-table'을 읽어 볼 것입니다. 고맙습니다. –