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...