Modifier le contenu d'une TEXTAREA

**benjea06** · 17/01/2020, 20h18

Bonjour,

A mon grand étonnement, j'ai trouvé un javascript qui permet de copier dans le presse papier le contenu d'un textearea ce que je ne croyais pas possible pour des raisons de sécurité.
Bref, j'aimerais y saisir un numéro de sécurité sociale genre 185087500200146, qu'il devienne 1 85 08 75 002 001 46 et qu'il se copie dans le presse papier pour que je puisse le coller n'importe où ensuite.
Il s'agirait donc de récupérer cette saisie après transformation dans une variable je suppose.
Je suis novice en la matière et je ne trouve pas la variable à modifier dans le script récupéré.
Quelqu’un pourrait me donner des pistes pour atteindre mon objectif svp?

Le script:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html>
 
<body>
 
 
<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>
<script language= "javascript">
 
 
 
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
 
copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();
 
 
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy'); 
  }
});
 
 
 
</script>
 
 
 
</html>
 
 
 
</body>
 
</html>

**javatwister** · 18/01/2020, 10h21

Salut,

petit conseil: choisis un input text plutôt qu'un textarea, sauf si tu comptes utiliser cette zone pour d'autres contenus plus longs;

Là, je teste aussi que le contenu de la zone contient bien 15 chiffres; sinon, le bouton ne fait rien.

Code html :

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

1
2
3
4
<div>
	<input type="text" id="zone" />
	<input type="button" id="copy" value="copier" />
</div>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
const esp=[0,2,4,6,9,12],
z=document.getElementById("zone");
document.getElementById("copy").addEventListener("click",()=>{
	let num=z.value;
	if(/^\d{15}$/.test(num)){
		const arr=[...num];
		esp.forEach((v)=>{arr[v]+=" "});
		z.value=arr.join("");
		z.select();
		document.execCommand("copy");
	}
},false)

**benjea06** · 18/01/2020, 11h13

Waaaa!!! Super! Merci beaucoup.

J'y croyais pas...

Aucun risque côté faille sur ce genre de javascript en intranet?
C'est pour mon boulot.

Autre question:
Pour gagner du temps, serait il possible que je copie dans le presse papier mon numéro 185087500200146 depuis une appli métier et qu'en cliquant simplement sur le bouton il remplisse le champs avec le numero espacé et que cette nouvelle version se place dans le presse papier..
Je ne sais pas si je suis clair:
Je suis sur mon logiciel métier (je mets en mémoire le numéro sans espace), je bascule sur ma page html et en cliquant simplement sur le bouton, je me retrouve avec le numéro comprenant les espaces dans le presse papier...
Ça serait encore plus top et plus rapide! (j'avais pas pensé...)

**javatwister** · 18/01/2020, 11h19

Tu veux dire que tu n'aurais plus besoin de champ texte?

**benjea06** · 18/01/2020, 12h00

En fait, stimulé par le script, les idées viennent...

En effet, ne pas le copier moi même serait top.

Voilà l'idéal, 3 boutons:
Un qui génère avec espace si je viens avec le num sans espace
Un qui génère sans espace si je viens avec espace
Un qui efface.

En face des boutons il y aurait les champs qui seraient remplis, de telle sorte que juste en cliquant dans les champs l'information se remettrait dans le presse papier.
Cela me permettrait d'utiliser le presse papier pour autre chose sur le même dossier et de revenir choper le numéro dans le format voulu à tout moment...

[bouton avec espace] 185087500200146
[bouton sans espace] 1 85 08 75 002 001 46
[effacer]
Que je clique sur le premier ou le 2 ème, les 2 informations s'afficheraient...

Voilà c'est probablement beaucoup demandé...

De toute facon, je vais me servir de ta base pour d'autre mise en forme mais je suis encore laborieux car novice en javascript...

**javatwister** · 18/01/2020, 12h00

difficile sans permissions!

A défaut, un ptit CTRL V dans la zone avant de cliquer...

**javatwister** · 18/01/2020, 12h02

Je parlais de ta précédente requête: faire un "paste" dans la zone;

**benjea06** · 18/01/2020, 12h02

ah.... les permissions... zut...

Elles bloqueraient pour quelles parties du projet?

**javatwister** · 18/01/2020, 12h04

Pour ce que tu disais plus haut: coller un numéro directement depuis le presse-papier sans faire CTRL V

**benjea06** · 18/01/2020, 12h04

ok, je colle moi même dans un des 2 champs:

1) l'autre se mettrait il au format après le clique, que je colle dans celui avec espace ou celui sans?
2) un clique sur le champs pourrait il me le remettre en mémoire à tout moment?

**benjea06** · 18/01/2020, 12h10

pour info, je rencontre 2 problèmes avec le script.
1) il ne semble pas marcher sous IE
2) quand je double clique sur le nuémro contracté, il chope un espace derrière et du coup j'ai 16 caractères...

**javatwister** · 18/01/2020, 12h12

- copier s'effectue sans permission spéciale donc dès que tu sélectionnes un nouveau contenu, et que tu demandes "copy", il va dans le presse-papier;
- pour ta nouvelle idée, le mieux est de garder à vue tes 2 versions du numéro;

**javatwister** · 18/01/2020, 12h16

- pour l'instant je n'ai rien fait pour IE!
- ne va pas trop vite dans tes essais!

**benjea06** · 18/01/2020, 12h28

Oui, excuse moi entre mon enthousiasme et mes marmots qui m'appellent pour leurs devoirs, je suis un peu speed!

Je teste tout ça calmement et je t'en reparle.
Je vais tenté le Onblur ou je sais pas quoi pour copier en mémoire...

Je t'en reparle si tu veux bien...

**javatwister** · 18/01/2020, 12h34

Bref:
1) tu as 2 champs côte à côte
2) tu colles le numéro d'origine dans le premier
3) tu cliques sur le bouton et ça le met en forme dans le deuxième

Code html :

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

1
2
3
4
5
<div>
	<input type="text" id="zone" /> 
	<input type="button" id="copy" value="mettre en forme et copier" /> 
	<input type="text" id="zone2" />
</div>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
const esp=[0,2,4,6,9,12],
z=document.getElementById("zone"),
z2=document.getElementById("zone2");
document.getElementById("copy").addEventListener("click",()=>{
	let num=z.value;
	if(/^\d{15}$/.test(num)){
		const arr=[...num];
		esp.forEach((v)=>{arr[v]+=" "});
		z2.value=arr.join("");
	}
},false)

**benjea06** · 18/01/2020, 13h30

Là je dois y aller, mais je teste tout cela.
Un grand merci en tout cas!

**javatwister** · 18/01/2020, 17h20

Un poil plus simple:

1) Quand tu copies la valeur dans le champ 1, ça la met dans le champ 2 sur onchange;
2) Toute valeur erronée dans le champ 1 efface les 2 champs;
2) Plus besoin de bouton;
3) Adapté pour IE.

Code html :

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

1
2
3
4
<div>
<label>id brut <input type="text" id="zone" /></label> ==> 
<label>id formaté <input type="text" id="zone2" /></label>
</div>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.addEventListener("load",function(){
	const esp=[0,2,4,6,9,12],
	z=document.getElementById("zone"),
	z2=document.getElementById("zone2");
 
	z.addEventListener("change",function(){
		const num=this.value;
		if(/^\d{15}$/.test(num)){
			const arr=num.split("");
			esp.forEach(function(v){arr[v]+=" "});
			z2.value=arr.join("");
		}
		else{
			z.value=z2.value="";
		}
	},false);
},false)

**benjea06** · 18/01/2020, 21h42

Yep, j'ai essayé tout ça...

Alors, je constate ceci:
1) Si je colle le numéro compacte 185087500200146 avec un ou des espaces blancs devant ou derrière, il serait souhaitable de supprimer ces espaces, le programme n'aurait plus que 15 caractères dans lesquels il mettrait les espaces désirés cette fois. Ce serait plus permissif que de contraindre à 15 chiffres. Si mes collègues rentrent plus ou moins de caractères , ils recommenceront, pas grave...
2) Si je colle le numéro avec les espaces, il s'agirait de faire la même chose, supprimer tous les espaces, et alors je me retrouverais avec le num sous la forme: 185087500200146
3) "Toute valeur erronée dans le champ 1 efface les 2 champs", je n'arrive pas à voir l'intérêt. Tu penses à quoi?
4) il faut que je fasse l'inverse aussi entrer de l'espacé et récupérer du compacté.

J'en suis là, je tâche de décrypter les programmes.

Je pense en effet plutôt tendre vers ça:
[bouton avec espace vers sans espace] 185087500200146
[bouton sans espace vers avec espace] 1 85 08 75 002 001 46
[boutton effacer]

Avec en plus un clic dans le champs qui copy en presse papier une fois les scripts bouton effectuées....

**javatwister** · 19/01/2020, 09h34

Tu as tous les éléments pour faire ce que tu veux... parce que ton problème d'espaces est vraiment basique et je t'ai donné tout le reste;
Tu montrerais une maquette html, ce ne serait pas plus mal...

**benjea06** · 19/01/2020, 13h36

Je vais m'y atteler...

Nom : eff.PNG
Affichages : 1144
Taille : 6,4 Ko

Modifier le contenu d'une TEXTAREA

JavaScript

Discussions similaires

Partager

Partager