Autoriser surbrillance d'un input mais interdire la modification

**tomi45** · 06/12/2012, 11h10

Bonjour à tous,

tout est dans le titre:

J'ai un champs input qui affiche une valeur, je souhaite que ce champs est la possibilité d'être mis en surbrillance par l'utilisateur mais uniquement en surbrillance car il ne doit pas pouvoir modifier cette valeur.

J'ai donc autorisé la surbrillance avec le readonly mais maintenant je suis bloqué...

Merci par avance de votre aide.

Thomas

**SpaceFrog** · 06/12/2012, 11h19

bloqué ?
quel est donc ce mystérieux blocage ?

**Bovino** · 06/12/2012, 11h24

Pourquoi vouloir utiliser un input si tu ne souhaites pas que ce soit un input ?

Autant faire ça avec un span ou une autre balise adaptée à ce que tu souhaites afficher, ensuite, un peu de CSS et / ou JavaScript permettent tout type de mise en forme...

**tomi45** · 06/12/2012, 11h37

D'abord merci pour vos réponses.

En effet je n'ai pas été assez clair^^

L'input affiche une valeur qui est formaté(1 33 44).
Le readonly permet, lors du clic, d'enlever ce formatage(13344) et permet donc à l'utilisateur de copier cette valeur.

Or je ne souhaite pas qu'il puisse la modifier mais juste la sélectionner.

Est ce plus clair ?

**SpaceFrog** · 06/12/2012, 11h42

permet donc à l'utilisateur de copier cette valeur.

ha il ne peut pas la copier dans un span ?

copier = ??? comment ???

**DrDarko** · 06/12/2012, 11h42

Envoyé par Bovino

Pourquoi vouloir utiliser un input si tu ne souhaites pas que ce soit un input ?

Autant faire ça avec un span ou une autre balise adaptée à ce que tu souhaites afficher, ensuite, un peu de CSS et / ou JavaScript permettent tout type de mise en forme...

Dans certain formulaire lorsque l'on remplit des champs ou que l'on coche des checkbox certains champs ne sont plus à informer et donc on les bloque.
Après c'est sur que ce n'est pas forcément la meilleure technique pour présenter un formulaire...

je suis bloqué

Ça ne veut rien dire...
Tu veux accéder à ton champs et ça ne marche plus...?
L'envoie de ton formulaire est bloqué...?

Mets un peu de code l'histoire de nous éclairer ça serait plus simple et détailles ton blocage stp.

EDIT : Bon désolé vous avez été trop rapide.

**tomi45** · 06/12/2012, 11h48

"bloqué" entre guillemet, c'est mon cerveau qui bloque

voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
onClick="document.getElementsByName(champs)[0].readonly=false;"  //Permet le deformattage du champs

Mais l'utilisateur peut maintenant modifier la valeur :/ alors qu'il doit uniquement pouvoir faire un simple copié coller de cette valeur qui a été déformattée

**Bovino** · 06/12/2012, 11h54

Allez, c'est mon jour de bonté :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="foo" readonly="readonly" value="1 33 44" data-formated="1 33 44" data-unformated="13344" onfocus="this.value=this.getAttribute('data-unformated');this.select()" onblur="this.value=this.getAttribute('data-formated');" />

**SpaceFrog** · 06/12/2012, 11h57

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
 #foo {
 border:inset 2px silver;
 width: 80px;
 padding: 0 5px
 }
</style>
</head>
 
<body>
<div id="foo" onmouseover="this.innerHTML='22222'" onmouseout="this.innerHTML='22 22 22'">22 22 22</div> 
</body>

**tomi45** · 06/12/2012, 11h58

Merci

je vais voir ça!

**Bovino** · 06/12/2012, 12h01

Spaffy, sauf erreur de ma part, ce que souhaite tomi45, ce serait que le clic remplace le double clic, c'est-à-dire que le texte en question soit sélectionné pour un éventuel copier.
C'est faisable dans une div bien sûr, mais là, j'ai pas le temps (ni l'envie à vrai dire

) de le faire... c'est pourquoi je suis resté sur l'input.

**SpaceFrog** · 06/12/2012, 12h02

Beef onclick ... et si tu arrives sur l'input par tabulation et que tu selectionnes par ctrl a c ?

**Watilin** · 06/12/2012, 12h24

+1 Bovino ! Mais comme le fait remarquer Spaff, c'est plus cohérent d'utiliser onfocus plutôt que onclick.

Envoyé par tomi45

"bloqué" entre guillemet, c'est mon cerveau qui bloque

voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
onClick="document.getElementsByName(champs)[0].readonly=false;"  //Permet le deformattage du champs

Mais l'utilisateur peut maintenant modifier la valeur :/ alors qu'il doit uniquement pouvoir faire un simple copié coller de cette valeur qui a été déformattée

Tomi45, si c'est ton script qui modifie la valeur, tu n'as pas besoin de retirer le readOnly.

**Bovino** · 06/12/2012, 14h00

Effectivement... J'ai remplacé onclick par onfocus qui est plus adapté dans mon exemple.

Autoriser surbrillance d'un input mais interdire la modification

JavaScript

Discussions similaires

Partager

Partager