contentEditable 커서 위치/스타일을 FireFox에 적용하십시오.

FireFox 3에서 contentEditable을 사용하는 데 문제가 있습니다. 입력을 시작하기 전까지 커서를 div에 위 또는 부분적으로 만 나타나는 문제가 있습니다. 그것은 올바르게 작동합니다). 이 일을 어떻게 막을 수 있을지에 대한 아이디어가 있습니까?contentEditable 커서 위치/스타일을 FireFox에 적용하십시오.

HTML :

 
<html> 
    <head><title>Test Page</title></head> 
    <body> 
    <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px"> 
     <div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true"> </div> 
    </div> 
    </body> 
</html>

alt text

출처

2009-12-31 Ben McCann

Firefox 4 이상에서만 편집 가능한 콘텐츠가 사용되었습니다. 필자는 모질라 팀이 FF 4에 대해 수정 한이 버그와 몇 가지 버그를 제출했습니다.

출처

2010-08-03 05:57:52

당신은 당신이 편집하고자하는 DIV간에 콘텐츠 또는 HTML의 일종을 둘 필요가 : 나는 시간 동안 내 머리를 잡았다했다

<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>

출처

2009-12-31 23:30:47 KramerC

감사합니다. 따라서 시작 태그와 끝 태그 사이에 공백을 넣으면 div를 편집 할 수 있습니다. 그러나 나는 커서가 div의 위/밖에서 나타나는 위치에 대해 설명했다. 내가 어떻게 다룰 수 있는지에 대한 아이디어가 있니? –

그 부분은 버그 인 것 같습니다. 이 데모에서 동일한 문제가 발생합니다 http://valums.com/wp-content/uploads/2009/10/editableText/demo/demo.htm – KramerC

이 문제를 해킹 할 방법을 찾고 있습니다. 내가 생각해내는 것은 기본적으로 숨겨진 div에 편집기를 래핑하는 것이 었습니다. 그런 다음 div를 표시하려면 인라인 자바 스크립트를 사용하십시오. 커서가 올바른 위치로 점프하는 것 같습니다. 그것의 더러운,하지만 작동합니다!

<div id="editor" style="display: none;"> 
    <% call RTE.renderTextArea(true) %> 
</div> 

<script>document.getElementById("editor").style.display="";</script>

출처

2010-06-06 22:39:30 WDuffy

블라인드 div를 작성하여 해결할 수 있으며 초점을 추가하면 브라우저가 만족할만한 요소에 집중하지는 않지만 사용자는 그걸 클릭하면 커서가 올바른 위치에 표시됩니다.

$(document).ready(function(){ 
    $("#target_blind").focus(); 
}); 

<div id="target_blind" style="display:none;"></div> 
<div id="target" contenteditable="true"></div>

한 가지 방법이 있지만 문제를 해결하지는 못합니다.

출처

2011-11-16 02:16:31 optimista

필자의 경우 외부 div (위와 같이 "editor")에 높이가없고 커서 위치가 contenteditable div 아래에 있습니다. 외부 div에 높이를 제공함으로써, 예를 들어. height: 1.5em;, 커서가 올바르게 위치합니다.

출처

2013-07-16 14:10:37 Blazes

Firefox 37.0.2에서 똑같은 문제가 발생합니다. 의 contentEditable의에서 제로 폭 공간을 퍼팅 :

.contenteditable:empty:before { 
    content: "\200B"; 
    display: inline; 
}

수정은 또한 파이어 폭스의 매우 유사 캐럿 위치 문제를 가지고 IE11 포함한 모든 현대적인 브라우저에서 작동 : 의사 요소는 문제를 해결하기 전에.

출처

2015-05-13 11:41:59 mbaer3000

이로 인해 '.contenteditable'컨테이너 상단에 빈 줄이 추가되었습니다 IE11에서 Enter를 눌렀을 때. 이것은':contentitable'에': empty'-pseudoselector를 적용하여 수정할 수 있습니다. – jfd

Thx, 수정 코드를 코드 조각에 추가했습니다. – mbaer3000

contentEditable 커서 위치/스타일을 FireFox에 적용하십시오.

답변

관련 문제