contentEditable cursor de posición / estilo en Firefox

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

Pregunta

Estoy teniendo problemas para usar contentEditable en Firefox 3. Tengo un problema en el que aparecerá el cursor por encima o sólo parcialmente en el div Después de hacer clic en él (hasta que empiece a escribir momento en el que se comporta correctamente). ¿Alguna idea sobre cómo puedo evitar que esto suceda?

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

¿Fue útil?

Solución 6

Me esperó y utiliza el contenido editable sólo en Firefox 4 y superior. Presenté este y algunos otros errores que el equipo de Mozilla ha fijado para FF 4.

Otros consejos

Estoy teniendo el mismo problema exacto con Firefox 37.0.2. Poniendo un espacio de anchura cero en los años contentEditable: antes de correcciones de pseudo elemento el problema: 

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

La corrección funciona en todos los navegadores modernos, como IE11, que también tiene un problema de la posición del símbolo bastante similar a Firefox.

Es necesario poner algún tipo de contenido o HTML entre el DIV que desea editar: 

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

Me estaba sacudiendo mi cerebro durante horas tratando de encontrar una manera de cortar alrededor de este. Lo que ocurrió fue para envolver el editor en un div que está oculto por defecto. A continuación, utilice un poco de javascript en línea para mostrar el div. Esto parece hacer que el cursor salte a la posición correcta. Es sucia, pero funciona! 

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

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

También se encontró con este problema en la última versión de FF 22. En mi caso, mi div exterior (por ejemplo, "editor" que el anterior) no tenía una altura, y mi posición del cursor estaba por debajo del div contenteditable. Al proporcionar una altura a la div exterior, por ejemplo, height: 1.5em;, el cursor se posiciona correctamente.

Esto puede ser resuelto a través de la creación div ciega y añadir el foco a la misma, a continuación, su navegador no se centra en el elemento contenteditable, pero el usuario debe hacer clic en eso y que ese caso se muestra el cursor en el lugar correcto. 

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

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

Hay una manera, sin embargo, no resuelve el problema, solamente embellecer.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top