la position du curseur contentEditable / style dans FireFox

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

Question

Je ne parviens pas à l'aide contentEditable dans FireFox 3. J'ai un problème où le curseur apparaîtra au-dessus ou que partiellement dans la div après que je clique dans ce (jusqu'à ce que je commence à taper au cours de laquelle il se comporte correctement). Toutes les idées sur la façon dont je peux arrêter cela se produise?

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>

text alt

Était-ce utile?

La solution 6

J'ai attendu et utilisé le contenu modifiable uniquement dans Firefox 4 et plus. J'ai déposé cela et quelques autres bugs que l'équipe Mozilla a fixé pour 4 FF.

Autres conseils

J'ai exactement le même problème avec Firefox 37.0.2. Mettre un espace de largeur nulle de la contenteditable: avant élément de pseudo résout le problème: 

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

Le correctif fonctionne dans tous les navigateurs modernes, y compris IE11, qui a aussi un problème de position caret tout à fait similaire à Firefox de.

Vous avez besoin de mettre une sorte de contenu HTML ou entre la DIV que vous voulez modifiable: 

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

je Cliquetis mon cerveau pendant des heures à essayer de trouver un moyen de pirater autour de cela. Ce que je suis venu avec était d'envelopper l'éditeur dans un div qui est caché par défaut. Ensuite, utilisez un peu en ligne javascript pour afficher la div. Cela semble faire le saut du curseur dans la position correcte. Son sale, mais ça marche! 

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

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

J'ai aussi rencontré ce problème dans la dernière version de FF 22. Dans mon cas, mon div externe (par exemple « éditeur » comme ci-dessus) n'a pas de hauteur, et ma position du curseur était en dessous de la contenteditable div. En prévoyant une hauteur de la div externe, par exemple, height: 1.5em;, le curseur se positionne correctement.

Cela peut être résolu en créant div aveugle et ajouter focus, alors votre navigateur ne se concentre pas sur l'élément contenteditable, mais l'utilisateur doit cliquer sur ce et ce cas, il montre le curseur au bon endroit. 

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

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

Il y a une façon, mais il ne résout pas le problème, ne se ressaisir.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top