Para desactivar un área de texto (o cualquier otro elemento de entrada), puede:Desactivación de Área de texto de CSS
En HTML, puede escribir: <textarea id='mytextarea' disabled></textarea>
De jQuery, puede : $("#mytextarea").attr("disabled","disabled");
CSS? ¿Es posible desactivar el área de texto con CSS?
Puede hacer que un área de texto parezca deshabilitado, pero no puede deshabilitarlo.
Uso de JavaScript, todo lo que realmente está haciendo es modificar el mismo atributo DOM que se ha configurado por el atributo HTML disabled, por lo que el uso de HTML y JavaScript eres esencialmente haciendo lo mismo. CSS, sin embargo, está completamente fuera de esta imagen, ya que no manipula DOM de ningún tipo; todo lo que controla es la apariencia (visual o de otro tipo) de un elemento, no su comportamiento.
Desafortunadamente no es posible en CSS puro ... tendrías que usar Javascript.
No, no se puede hacer en CSS. Sin embargo, puede asignar un estilo a la entrada como "deshabilitada" en CSS y usar la propiedad maxlength = "0" en el código HTML para que las personas no puedan escribir en ella. Además, asegúrese de cambiar el estilo del puntero como el correcto para que las personas no vean el puntero que les indica que escriban en el cuadro.
CSS trata con los estilos. Deshabilitar un elemento es funcional.
Por supuesto, CSS se está volviendo más funcional con cosas como transiciones y eso es más un área gris. Pero el propósito de CSS es mantenerlo como estilos y no controlar el control funcional del elemento.
No, css no puede deshabilitar elementos.
Puede "falsear" un control deshabilitado diseñándolo para que parezca visualmente deshabilitado.
Aquí hay un truco.
<textArea class="tailLog">This page is waiting for something.</textArea>
<script type="text/javascript">
$(document).ready( function(){
$(".tailLog").off().on("keydown", function(event){
event.preventDefault();
return;
});
});
</script>
La forma en que funciona es esto. Cada vez que el usuario intenta ingresar algo, usamos jquery para atrapar el evento. Luego le decimos al evento que no queremos que haga su comportamiento predeterminado. Como digo, es un truco, pero es efectivo en un apuro.
En un proyecto tengo un contenedor con un área de texto y algunos botones dentro. Para desactivar toda la cosa añado una clase a la misma con el siguiente código:
.disabled {
opacity: 0.3;
}
.disabled:after {
width: 100%;
height: 100%;
position: absolute;
}
<div class="disabled">
<textarea></textarea>
<!-- textarea, buttons and other input elements -->
</div>
Mientras que la opacidad es sólo para el espectáculo, el: después elemento está haciendo el trabajo. Todos los elementos en el contenedor ya no reaccionan al clic y al mouseover (sin embargo, alcanzarlos con el tabulador seguirá funcionando). Para mis necesidades y en mi caso, esto funciona bien y es un truco de CSS fácil.
Excelente idea. Favorito. Sin embargo, necesita configurar moz-use-focus para ignorar los campos, de lo contrario, los usuarios pueden tabular en él. – Blargh
<textarea placeholder="This is a textarea, and it is not clickable" style="pointer-events: none"></textarea>
Puede hacer que los elementos por completo permite hacer clic con CSS: point-events: none;
textarea {
pointer-events: none;
border: 1px solid #eee;
padding: 20px;
}<textarea placeholder="This is a textarea, and it is not clickable"></textarea>aún puede usar la pestaña para seleccionar – Viliami
Incluso si se puede, semánticamente CSS es para la exhibición, no el comportamiento, así que diría css no es el forma adecuada de desactivar cosas (puede ocultarlo usando 'display: none' si lo desea) –
@Mark ¿Por qué? disabled es un atributo de un textarea, la línea de arriba en bArmageddon es correcta. –
No estoy seguro de que la desactivación de un área de texto se pueda considerar automáticamente como un comportamiento, es más el estilo y la interfaz de usuario lo que inhabilita al usuario para insertar una entrada. ¿Qué funcionalidad tiene 'disabled 'además de prevenir y modificar la entrada? Podría considerarse un problema de interfaz de usuario estos días ... – bArmageddon