/ / HTML - Não é possível mover o cursor dentro da área de texto quando o CSS está ativado - html, css, forms, html5, textarea

HTML - Não é possível mover o cursor dentro da área de texto quando o CSS está em - html, css, forms, html5, textarea

Eu tenho um formulário HTML super simples:

<form name="editor" action="#" method="POST">
<textarea name="contents" cols="100" rows="50"><?php echo $text; ?></textarea>
<br>
<input type="submit" name="submit" value="Submit" />
</form>

O texto ecoado dentro dele é código HTML.

Agora, quando o CSS está desativado, ele funciona perfeitamente.

Mas quando está ligado, eu:

  • não é possível clicar em qualquer lugar dentro do texto; para colocar o cursor ali
  • não pode mover o cursor com as teclas de seta, apenas alguns caracteres serão movidos para a esquerda e para a direita e, se as setas para cima / para baixo forem pressionadas, o cursor será movido para a parte superior / inferior da área de texto.

O que eu tentei:

  • A exclusão da área de texto do firebug CSS exibida foi aplicada a ele
  • Tentando com ou sem JS para verificar se isso faz diferença
  • Tentei em navegadores diferentes, o mesmo problema se repete
  • Desativar completamente o CSS e funcionar, mas não é uma opção

A única idéia que tenho é que talvez a área de texto esteja herdando algum CSS de algum lugar, mas que tipo de CSS causaria esse comportamento, o que procurar?

Aqui está o CSS como visto pelo firebug:

textarea {
overflow: auto;
resize: vertical;
vertical-align: top;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
}
html, button, input, select, textarea {
color: #222222;
font-family: sans-serif;
}

Obrigado por qualquer resposta!

Respostas:

4 para resposta № 1

Obrigado a todos! Você realmente me ajudou a definir esse violino, comecei a colar parte por parte do CSS, e aqui está o que causou o problema, se alguém entrar no mesmo problema:

body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

A seleção de texto basicamente desativada foi obviamente herdada do corpo.

Obrigado a todos novamente.

PS. Também para esclarecer a quem suspeita que meu código dentro da área de texto não tenha escapado - sim, foi, mas isso não parece ser um problema, você obviamente pode fazer isso.