web-dev-qa-db-fra.com

Est-il possible de rendre les champs de saisie en lecture seule via CSS?

Je sais que les éléments d'entrée sont rendus en lecture seule en appliquant l'attribut booléen readonly. En tant qu'attribut, il n'est pas affecté par CSS.

D'autre part, mon scénario semble très bien convenir à CSS, j'espérais donc qu'il existe une astuce CSS pour me permettre de le faire. J'ai un version imprimable hyperlien sur mon formulaire. Cliquez dessus pour afficher ... une version imprimable du document. Il s’agit principalement de CSS, mon print.css se présente comme suit:

html.print {
    width: 8.57in;
}

.print body {
    font: 9pt/1.5 Arial, sans-serif;
    margin: 0 1in;
    overflow: auto;
}

.print #header, .print #footer {
    display: none;
}

.print .content {
    background-color: white;
    overflow: auto;
}

.print .fieldset > div.legend:first-child {
    background: white;
}

.print ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}

.print :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}

.print ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}

.print :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}

.print .check-mark {
    display: inline;
}

.print input[type=checkbox] {
    display: none;
}

.print .boolean-false {
    display: none;
}

Il existe également quelques éléments javascript, tels que:

  • Ajout de la classe print à l'élément html
  • Affichage des tableaux sans barres de défilement
  • Quelques autres choses mineures, telles que cacher les superpositions popup.

Mon problème actuel est les champs de saisie. Ils devraient être en lecture seule, cependant, je ne sais pas comment le faire avec des modifications minimales du code. CSS pourrait être une solution parfaite.

Des idées?

javascripthtmlcsscss3printing
32
mark

Avec CSS seulement? Ceci est en quelque sorte possible sur les entrées de texte en utilisant user-select:none :

.print {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;          
}

Exemple JSFiddle .

Il convient de noter que cela ne fonctionnera pas dans les navigateurs qui ne prennent pas en charge CSS3 ni la propriété user-select . La propriété readonly devrait idéalement être attribuée au balisage d’entrée que vous souhaitez faire en lecture seule, mais cela fonctionne comme une alternative CSS simplifiée.

Avec JavaScript:

document.getElementById("myReadonlyInput").setAttribute("readonly", "true");

Edit: La méthode CSS ne fonctionne plus sous Chrome (29). La propriété -webkit-user-select semble maintenant être ignorée sur les éléments d'entrée.

30
James Donnelly

Il n'est pas (avec les navigateurs actuels) possible de rendre un champ de saisie en lecture seule via CSS uniquement. 

Cependant, comme vous l'avez déjà mentionné, vous pouvez appliquer l'attribut readonly='readonly'.

Si votre critère principal est de ne pas modifier le balisage dans la source, il existe des moyens de l'inclure, de manière discrète, avec javascript.

Avec jQuery, c'est simple:

 $('input').attr('readonly', 'readonly');

Ou même avec Javascript simple:

document.getElementById('someId').setAttribute('readonly', 'readonly');
9
Faust

Ce n'est pas vraiment ce dont vous avez besoin, mais cela peut aider et répondre à la question ici en fonction de ce que vous voulez réaliser.

Vous pouvez empêcher l'envoi de tous les événements de pointeur à l'entrée à l'aide de la propriété CSS: pointer-events:none Elle ajoutera en quelque sorte un calque au-dessus de l'élément, ce qui vous empêchera de cliquer dessus. ajoutez également un cursor:text à l'élément parent pour restituer le style du curseur de texte à l'entrée ...

Utile, par exemple, lorsque vous ne pouvez pas modifier le JS/HTML d'un module .. et que vous pouvez simplement le personnaliser par css.

JSFIDDLE

7
Cétia

Ce n’est pas possible avec les CSS, mais j’ai utilisé une astuce de CSS dans un de mes sites Web, veuillez vérifier si cela fonctionne pour vous.

L'astuce est la suivante: Enveloppez le champ de saisie avec un div et rendez-le relatif, placez une image transparente à l'intérieur du div et rendez-la absolue sur le champ de saisie afin que personne ne puisse la modifier.

css

.txtBox{
    width:250px;
    height:25px;
    position:relative;
}
.txtBox input{
    width:250px;
    height:25px;
}
.txtBox img{
    position:absolute;
    top:0;
    left:0
}

html

<div class="txtBox">
<input name="" type="text" value="Text Box" />
<img src="http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" width="250" height="25" alt="" />
</div>

Fichier jsFiddle

2
Roy Sonasish

Vous ne définissez pas le comportement des contrôles via CSS, mais seulement leur style. Vous pouvez utiliser jquery ou un simple javascript pour modifier la propriété des champs.

0
sAnS

Pourquoi ne pas masquer l'élément d'entrée et le remplacer par un élément label ayant le même contenu?

Je me suis demandé comment l’application React TODOMVC a permis de réaliser la même chose et c’est la stratégie qu’ils ont mise au point.

Pour le voir en action, consultez l'application ci-dessous et observez les propriétés CSS des éléments TODO lorsque vous double-cliquez dessus, puis cliquez à l'extérieur.

http://todomvc.com/examples/react-backbone/#/

Lorsque vous rendez le rendu de la page, vous pouvez avoir une entrée modifiable ou une étiquette non modifiable avec display: none; en fonction de votre requête média.

0
Ian Danforth

Aucun comportement ne peut être défini par CSS. Le seul moyen de désactiver quelque chose en CSS est de le rendre invisible en définissant display:none ou en mettant simplement div avec transparent img et en modifiant leurs ordres z pour désactiver la focalisation de l'utilisateur à l'aide de la souris. Même si, l'utilisateur pourra toujours faire la mise au point avec l'onglet d'un autre champ.

0
David Jashi