Compléter un javascript avec un input récupérant les données traitées

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

j'ai un script qui fonctionne très bien mais que je ne sais pas trop compléter...

Dans la page html suivante, j'ai 2 fonctions de conversion...

La première qui me permet de mettre des espaces dans un numéro de sécurité social (et inversement qui les supprime...)

La deuxième qui supprime les espaces de ma séquence alphanumérique et mets un tiret en 6 ème position.
Exemple 33333 642536 L devient 33333-642536L
J'aurais aimé que le deuxième script renseigne, en plus, dans la page un input avec la même séquence sans espace et sans tiret.
Accessoirement, l'"Effacer" viderait aussi cet input.
Quelqu'un peut il m'aider svp?

Ex: 33333 642536 L deviendrait 33333642536L
Pièce jointe 620524

La page HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="cadre"> <input type="button" id="b1" value="=>" /><input type="text" id="zone" /></BR> <input type="button" id="b2" value="=>" /><input type="text" id="zone2" /></br> <input type="button" id="clear" value="effacer" /></br> <input type="text" id="name" name="name" size="35"> </br> <input type="button" id="Pb2" value="=>" /><input type="text" id="Pzone2" /></br> <input type="button" id="Pb1" value="=" /> <input type="text" id="Pzone" /></BR> <input type="button" id="Pclear" value="effacer" /></br>  <textarea rows="2" cols="33"></textarea> </div> </div> </body> </html>
Le script de conversion:
Code:

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 window.addEventListener("load",function(){ const esp=[0,2,4,6,9,12], Pz=document.getElementById("Pzone"), Pz2=document.getElementById("Pzone2"), Pb1=document.getElementById("Pb1"), Pb2=document.getElementById("Pb2"), Pclear=document.getElementById("Pclear"); Pb1.addEventListener("click",function(){ const Pnum=Pz.value.trim(); const arr=Pnum.split(""); esp.forEach(function(v){arr[v]+=" "}); Pz2.value=arr.join(""); Pz2.select(); document.execCommand("copy") },false); Pb2.addEventListener("click",function(){ const Pnum=Pz2.value; Pz.value=Pnum.replace(/\s/g,"").replace(/^(.{5})/, '$1-'); Pz.select(); document.execCommand("copy") },false); Pz.addEventListener("click",function(){ this.select(); document.execCommand("copy") },false); Pz2.addEventListener("click",function(){ this.select(); document.execCommand("copy") },false); Pclear.addEventListener("click",function(){ Pz.value=Pz2.value=""; },false); },false)

09/06/2022, 21h13
ASCIIDEFOND

Bonsoir à tous,

Peut-être une solution avec le gestionnaire d'évènement "onblur", qui se déclenchera lorsque l'input perdra le focus. https://www.mediacollege.com/interne...ve-spaces.html

Merci bien mais pas assez expert pour savoir comment utiliser ces infos... :(
Je vais regarder et tacher de comprendre.
:)

J'ai déjà avancé en intégrant un nouvel input que je peux effacer grâce au JavaScript que j'ai modifié...
Me reste à renseigner le champs automatiquement.
Voir lignes 5 et 38

Code:

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
window.addEventListener("load",function(){
	const esp=[0,2,4,6,9,12],
	Pz=document.getElementById("Pzone"),
	Pz2=document.getElementById("Pzone2"),
	Pz3=document.getElementById("Pzone3"), //<======================
	Pb1=document.getElementById("Pb1"),
	Pb2=document.getElementById("Pb2"),
	Pclear=document.getElementById("Pclear");
 
	Pb1.addEventListener("click",function(){
		const Pnum=Pz.value.trim();
		const arr=Pnum.split("");
		esp.forEach(function(v){arr[v]+=" "});
		Pz2.value=arr.join("");
		Pz2.select();
		document.execCommand("copy")
	},false);
 
	Pb2.addEventListener("click",function(){
		const Pnum=Pz2.value;
		Pz.value=Pnum.replace(/\s/g,"").replace(/^(.{5})/, '$1-');
		Pz.select();
		document.execCommand("copy")
	},false);
 
	Pz.addEventListener("click",function(){
		this.select();
		document.execCommand("copy")
	},false);
 
	Pz2.addEventListener("click",function(){
		this.select();
		document.execCommand("copy")
	},false);
 
	Pclear.addEventListener("click",function(){
		Pz.value=Pz2.value="";
		Pz.value=Pz3.value=""; //<======================
	},false);
},false)

Voilà, j'ai modifié le script.
La click-copié fonctionne dans la zone 3 mais pas l'insertion...

Modif lignes 27 à 32
Modif lignes 44 à 47
Modif ligne 51

Code:

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
45
46
47
48
49
50
51
52
53
window.addEventListener("load",function(){
	const esp=[0,2,4,6,9,12],
	Pz=document.getElementById("Pzone"),
	Pz2=document.getElementById("Pzone2"),
	Pz3=document.getElementById("Pzone3"),
	Pb1=document.getElementById("Pb1"),
	Pb2=document.getElementById("Pb2"),
	Pb3=document.getElementById("Pb3"),
	Pclear=document.getElementById("Pclear");
 
	Pb1.addEventListener("click",function(){
		const Pnum=Pz.value.trim();
		const arr=Pnum.split("");
		esp.forEach(function(v){arr[v]+=" "});
		Pz2.value=arr.join("");
		Pz2.select();
		document.execCommand("copy")
	},false);
 
	Pb2.addEventListener("click",function(){
		const Pnum=Pz2.value;
		Pz.value=Pnum.replace(/\s/g,"").replace(/^(.{5})/, '$1-');
		Pz.select();
		document.execCommand("copy")
	},false);
 
	Pb3.addEventListener("click",function(){
		const Pnum=Pz3.value;
		Pz.value=Pnum.replace(/\s/g,"").replace(/^(.{5})/, '$1');
		Pz.select();
		document.execCommand("copy")
	},false);
 
	Pz.addEventListener("click",function(){
		this.select();
		document.execCommand("copy")
	},false);
 
	Pz2.addEventListener("click",function(){
		this.select();
		document.execCommand("copy")
	},false);
 
	Pz3.addEventListener("click",function(){
		this.select();
		document.execCommand("copy")
	},false);
 
	Pclear.addEventListener("click",function(){
		Pz.value=Pz2.value="";
		Pz.value=Pz3.value="";
	},false);
},false)

la page htm (modif ligne 91)

Code:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "">
<html xmlns="" lang="fr" xml:lang="fr">
<!-- Date de création: 15/10/2008 -->
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 
 
<style type="text/CSS">
.center-div
{
  margin: 0 auto;
  width: 800px;
  height: 800px;
 
}
 
#menu {
height:50px; line-height : 30px;
 
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:#6ABEFB;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#0972BD;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
body {
background-color:#FaFaFa;
}
</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute; 
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->
<meta name="description" content="blabla" />
</head>
<body>
<div id="menu" class="center-div">
 
<script src="./@scripts/secu_space.js"></script>
<script src="./@scripts/pension.js"></script>
 
 
 
<div class="cadre">
 
<input type="button" id="b1" value="=>" /><input type="text" id="zone" /></BR>
<input type="button" id="b2" value="=>" /><input type="text" id="zone2" /></br>
<input type="button" id="clear" value="effacer" /></br> 
<input type="text" id="name" name="name" size="35">
</br> 
 
<input type="button" id="Pb2" value="=>" /><input type="text" id="Pzone2" /></br>
<input type="button" id="Pb1" value="=" /> <input type="text" id="Pzone" /></BR>
<input type="button" id="Pb3" value="=" /> <input type="text" id="Pzone3" /></BR>
<input type="button" id="Pclear" value="effacer" /></br> 
<!---------input type="text" id="Pname" name="name" size="35"--->
<textarea rows="2" cols="33"></textarea> 
 
 
</div>
</div>
</body>
</html>

15/06/2022, 17h54
NoSmoking

Bonjour,
pas trop compris le but de la manœuvre mais une chose est que j'ai du mal à suivre avec l'emploi de nom de variable qui n'ont aucune signification !

Citation:

La click-copié fonctionne dans la zone 3 mais pas l'insertion.

de quelle insertion parles-tu ?