contentEditable cursore di posizione / style in FireFox

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

Domanda

Ho problemi con contentEditable in FireFox 3. Ho un problema in cui viene visualizzato il cursore sopra o solo parzialmente nel div dopo clicco in esso (fino a quando si digita qualcosa e in quel momento si comporta in modo corretto). Tutte le idee su come posso evitare che questo succeda?

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

È stato utile?

Soluzione 6

ho aspettato e usato il contenuto modificabile solo in Firefox 4 e superiori. Ho presentato questo e pochi altri bug che il team di Mozilla ha fissato per il 4 FF.

Altri suggerimenti

Sto avendo lo stesso problema esatto con Firefox 37.0.2. Mettere uno spazio larghezza zero nella contenteditable di: prima pseudo elemento risolve il problema: 

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

La correzione funziona in tutti i browser moderni, tra cui IE11, che ha anche un problema di posizione del cursore molto simile a Firefox.

Hai bisogno di mettere un qualche tipo di contenuti o HTML tra il DIV che si desidera modificabile: 

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

Sono stato sferragliare mio cervello per ore cercando di trovare un modo per incidere intorno a questo. Quello che mi è venuta è stato quello di avvolgere l'editor in un div che è nascosta per impostazione predefinita. Quindi usare un po 'in linea javascript per visualizzare il div. Questo sembra far saltare il cursore nella posizione corretta. La sua sporca, ma funziona! 

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

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

Ho anche incontrato questo problema nella versione più recente di 22. FF Nel mio caso, il mio div esterno (ad esempio, "Editor" di cui sopra) non ha avuto un altezza, e la mia posizione del cursore è stato al di sotto del div contenteditable. Fornendo un'altezza al div esterno, ad esempio height: 1.5em;, il cursore si è posizionata correttamente.

che può essere risolto attraverso la creazione div cieco e aggiungi attenzione ad esso, allora il tuo browser non è focalizzata sulla elemento contenteditable, ma l'utente deve cliccare su questo e quel caso si vede il cursore nel posto giusto. 

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

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

C'è un modo, tuttavia non risolve problema, solo abbellire.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top