Posição/estilo do cursor contentável

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

Pergunta

Estou tendo problemas para usar o conteúdo do Firefox 3. Tenho um problema em que o cursor aparecerá acima ou apenas parcialmente na div depois de clicar nele (até começar a digitar quando se comporta corretamente). Alguma idéia de como posso impedir que isso aconteça?

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

Foi útil?

Solução 6

Esperei e usei o conteúdo editável apenas no Firefox 4 e superior. Eu arquivei isso e alguns outros bugs que a equipe Mozilla fixou para o FF 4.

Outras dicas

Estou tendo exatamente o mesmo problema com o Firefox 37.0.2. Colocando um espaço de largura zero no conteúdo do Ensino: antes do pseudo elemento corrige o problema:

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

A correção funciona em todos os navegadores modernos, incluindo o IE11, que também tem uma questão de posição intermediária bastante semelhante à do Firefox.

Você precisa colocar algum tipo de conteúdo ou html entre o div que deseja editável:

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

Eu estava sacudindo meu cérebro por horas tentando encontrar uma maneira de invadir isso. O que eu inventei foi embrulhar o editor em uma div, que está oculta por padrão. Em seguida, use um pouco de javascript embutido para exibir o div. Isso parece fazer o cursor pular para a posição correta. Está sujo, mas funciona!

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

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

Também encontrei esse problema na versão mais recente do FF 22. No meu caso, minha div (por exemplo, "editor" como acima) não tinha altura e minha posição de cursor estava abaixo da divisão contentável. Fornecendo uma altura para a divisão externa, por exemplo height: 1.5em;, o cursor se posicionou corretamente.

Isso pode ser resolvido através da criação de Div Blind e adicionar foco a ele, então o seu navegador não está focado no elemento contentável, mas o usuário deve clicar nisso e nesse caso, ele mostra cursor no lugar certo.

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

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

Há uma maneira, no entanto, isso não resolve problemas, apenas o Smarten Up.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top