web-dev-qa-db-fra.com

Désactiver une zone de texte en utilisant CSS

Comment désactiver une zone de texte en CSS? Actuellement, nous avons dans notre vue une zone de texte qui peut être activée/désactivée en fonction d'une propriété du modèle. Nous allons voir asp.net MVC; En fonction de la valeur de la propriété Model, nous devons restituer une zone de texte ou une zone de texte en lecture seule. nous pensions y parvenir en appliquant CSS au contrôle de vue. Est-ce que quelqu'un a fait ça plus tôt?

csstextbox
55
Balaji

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 également définir l'attribut HTML:

disabled="disabled"
53
Dustin Laine

vous pouvez désactiver via css:

pointer-events: none;

Ne fonctionne pas partout cependant.

54
abbie

Vous ne pouvez rien désactiver avec CSS, c'est un problème fonctionnel. CSS est destiné aux problèmes de conception. Vous pouvez donner l’impression qu’une zone de texte est désactivée en y appliquant des couleurs délavées.

Pour réellement 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 le souhaitez, vous pouvez définir ceci via JavaScript:

document.forms['formName']['inputName'].disabled = true;​​​​

Démo: http://jsfiddle.net/655Su/

N'oubliez pas que les entrées désactivées ne transmettent pas leurs valeurs lorsque vous publiez des données sur le serveur. Si vous souhaitez conserver les données, mais que vous n'autorisez pas leur modification directe, vous voudrez peut-être le définir sur readonly.

// 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, vous devrez donc le faire vous-même:

input[readonly] { 
    background: #CCC; 
    color: #333; 
    border: 1px solid #666 
}

Vous pouvez également cibler n'importe quel élément désactivé:

input[disabled] { /* styles */ }
53
Sampson

Vous ne pouvez pas désactiver une zone de texte en CSS. La désactiver n'est pas une tâche de présentation, vous devrez le faire dans le balisage HTML en utilisant l'attribut disabled.

Vous pouvez peut-être mettre quelque chose en place en plaçant la zone de texte sous un élément transparent positionné de manière absolue avec z-index ... Mais c'est juste idiot, de plus vous auriez besoin d'un deuxième élément HTML de toute façon.

Vous pouvez cependant style zones de texte désactivées (si c'est ce que vous voulez dire) en CSS avec

input[disabled] { ... }

à partir de IE7 et dans tous les autres principaux navigateurs.

7
Pekka 웃

Pour aller plus loin dans la réponse de Pekka, j'avais un style "style1" sur certains de mes champs de texte. Vous pouvez créer un "style1 [désactivé]" pour ne nommer que les zones de texte désactivées à l'aide du style "style1":

.style1[disabled] { ... }

A bien fonctionné sur IE8.

3
GBU

** Il suffit de copier coller ce code et de l'exécuter, vous pouvez voir la zone 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="[email protected]" />
       <div class="overlay">
        </div>
       </div> 
</body>
</html>
3
ravi tom

Essayez juste ceci.

<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>

Cela ne permettra à aucun caractère d'être entré dans la zone de texte.

1
Arun Banik

une autre façon est en le rendant en lecture seule

0
silentwarrior

Réponse courte

Non, vous ne pouvez pas désactiver une zone de texte à l'aide de CSS.

Longue réponse

pointer-events: none Fonctionne mais sur IE la propriété CSS ne fonctionne qu'avec IE 11 ou supérieur, de sorte qu'il ne fonctionne pas partout sur tous les navigateurs. Sauf que vous ne pouvez pas désactiver une zone de texte en utilisant CSS.

Cependant, vous pouvez désactiver une zone de texte en HTML comme ceci:

<input value="...." readonly />

Mais si la zone de texte est dans un formulaire et que vous voulez que la valeur de la zone de texte ne soit pas soumise, procédez comme suit:

<input value="...." disabled />

Donc, la différence entre ces deux options pour désactiver une zone de texte est que disabled ne peut pas vous permettre de soumettre la valeur de la zone de texte input mais readonly permet.

Pour plus d'informations sur la différence entre les deux, voir "Quelle est la différence entre disabled="disabled" Et readonly="readonly" .

0
zixuan