Désactiver une boîte de texte en utilisant CSS
comment désactiver une boîte de texte en CSS? Actuellement nous avons une boîte de texte dans notre vue qui peut être activée/désactivée en fonction d'une propriété dans le modèle. Nous verrouillâmes asp.net MVC view; en fonction de la valeur de la propriété Model, nous avons besoin soit d'un rendu textbox, soit d'un rendu TextBox en lecture seule. nous envisagions de le faire en appliquant CSS au contrôle de la vue. Quelqu'un a fait cela plus tôt?
7 réponses
CSS ne peut pas désactiver la zone de texte, vous pouvez toutefois désactiver l'affichage ou la visibilité.
display: none;
visibility: hidden;
ou vous pouvez aussi définir le HTMLattribute:
disabled="disabled"
vous ne pouvez rien désactiver avec CSS, c'est un problème fonctionnel. CSS est destiné à la conception des questions. Vous pourriez donner l'impression qu'une boîte de texte est désactivée, en mettant des couleurs délavées sur elle.
à en fait désactiver l'élément, vous devez utiliser l'attribut booléen désactivé:
<input type="text" name="lname" disabled />
Démo: http://jsfiddle.net/p6rja /
ou, si vous voulez, vous pouvez définir ceci via JavaScript:
document.forms['formName']['inputName'].disabled = true;
Démo: http://jsfiddle.net/655Su /
gardez à l'esprit que les entrées désactivées ne passeront pas leurs valeurs lorsque vous postez des données vers le serveur. Si vous voulez conserver les données, mais ne pas autoriser à les éditer directement, Vous pouvez être intéressé à le définir à readonly à la place.
// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;
Démo: http://jsfiddle.net/655Su/1 /
cela ne change pas L'interface utilisateur de l'élément, donc vous devez le faire vous-même:
input[readonly] {
background: #CCC;
color: #333;
border: 1px solid #666
}
vous pouvez également cibler tout élément désactivé:
input[disabled] { /* styles */ }
vous pouvez désactiver via css:
pointer-events: none;
ne marche pas partout.
vous ne pouvez pas désactiver une boîte de texte dans CSS. Désactiver cette fonction n'est pas une tâche de présentation, vous devrez le faire dans le markup HTML en utilisant l'attribut disabled .
vous pouvez être en mesure de mettre quelque chose ensemble en mettant la boîte de texte sous un élément absolument transparent positionné avec z-index... Mais c'est juste stupide, en plus vous auriez besoin d'un deuxième élément HTML de toute façon.
Vous pouvez, cependant, style désactivé boîtes de texte (si c'est ce que vous voulez dire) dans CSS en utilisant
input[disabled] { ... }
à partir de IE7 vers le haut et dans tous les autres principaux navigateurs.
* * il suffit de copier coller ce code et exécuter vous pouvez voir la boîte de texte désactivée * *
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>.container{float:left;width:200px;height:25px;position:relative;}
.container input{float:left;width:200px;height:25px;}
.overlay{display:block;width:208px;position:absolute;top:0px;left:0px;height:32px;}
</style>
</head>
<body>
<div class="container">
<input type="text" value="rvi.tom@gmail.com" />
<div class="overlay">
</div>
</div>
</body>
</html>
allant plus loin sur la réponse de Pekka, j'ai eu un style" style1 " sur certaines de mes boîtes de texte. Vous pouvez créer un "style1 [désactivé]" de sorte que vous style seulement les boîtes de texte handicapées en utilisant "style1" style:
.style1[disabled] { ... }
fonctionne bien sur IE8.
essayez ça.
<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>
cela ne permettra pas d'entrer des caractères dans la zone de texte.