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 № 1Obrigado 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.