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

**benjea06** · 09/06/2022, 14h40

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
Nom : script.png
Affichages : 180
Taille : 17,2 Ko

Nom : script.png
Affichages : 180
Taille : 17,2 Ko

La page HTML

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
<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> 
<!---------input type="text" id="Pname" name="name" size="35"--->
<textarea rows="2" cols="33"></textarea> 
 
 
</div>
</div>
</body>
</html>

Le script de conversion:

Code :

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

**ASCIIDEFOND** · 09/06/2022, 21h13

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

**benjea06** · 10/06/2022, 13h25

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 :

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

**benjea06** · 14/06/2022, 13h34

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 :

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

**NoSmoking** · 15/06/2022, 17h54

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 !

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

de quelle insertion parles-tu ?

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

JavaScript

Discussions similaires

Partager

Partager