Inhaltbarer Cursorposition/-stil in Firefox

StackOverflow https://stackoverflow.com/questions/1987435

Frage

Ich habe Probleme, in Firefox 3 in zufriedene Verwendung zu verwenden. Ich habe ein Problem, bei dem der Cursor oben oder nur teilweise in der DIV angezeigt wird, nachdem ich darauf geklickt habe (bis ich mit dem Tippen beginne, zu welcher Zeit er sich richtig verhält). Irgendwelche Ideen, wie ich dies verhindern kann?

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

War es hilfreich?

Lösung 6

Ich wartete und benutzte den Inhalt nur in Firefox 4 und höher. Ich habe dies und ein paar andere Fehler eingereicht, die das Mozilla -Team für FF 4 behoben hat.

Andere Tipps

Ich habe genau das gleiche Problem mit Firefox 37.0.2. Wenn Sie einen Platz in der Breite in den inhaltlichen, vorgeschlagen: Bevor das Pseudo -Element das Problem behebt:

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

Das Fix arbeitet in allen modernen Browsern, einschließlich IE11, das auch ein Problem mit der Pflegeposition aufweist.

Sie müssen eine Art Inhalt oder HTML zwischen dem Div einstellen, das Sie bearbeiten möchten:

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

Ich rasselte stundenlang mein Gehirn und versuchte, einen Weg zu finden, um mich umzuhacken. Was ich mir ausgedacht habe, war, den Herausgeber in ein Div zu wickeln, das standardmäßig versteckt ist. Verwenden Sie dann ein wenig Inline -JavaScript, um die DIV anzuzeigen. Dies scheint den Cursor in die richtige Position zu springen. Es ist schmutzig, aber es funktioniert!

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

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

Ich habe dieses Problem auch in der neuesten Version von FF 22 gestoßen. In meinem Fall hatte mein äußerer Div (z. B. "Editor" wie oben) keine Höhe, und meine Cursorposition lag unter dem zufriedenbaren Div. Durch die Höhe der äußeren Div height: 1.5em;, Der Cursor hat sich richtig positioniert.

Dies kann durch das Erstellen von Blind Div und den Fokus fokussiert werden, dann konzentriert sich Ihr Browser nicht auf ein zufriedenes Element, aber der Benutzer sollte darauf klicken, und in diesem Fall wird Cursor an der richtigen Stelle angezeigt.

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

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

Es gibt einen Weg, es löst jedoch kein Problem, sondern nur Smarten.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top