Afficher un point automatiquement avec input type=tel

**maxtrident** · 23/01/2024, 12h24

bonjour
je voudrais quand l'utilisateur entre son n° de tel du style 010304 ça m'affiche le point automatiquement 01.03
j'ai pas trouvé de script tous fait.
Quelqu'un peut me donner une piste comment faire ça.

**unanonyme** · 23/01/2024, 13h32

Bonjour,

tu peux chercher du cote de "input masking". ça doit exister en jquery.

Sinon tu peux tenter https://alpinejs.dev/plugins/mask

Bonne journée.

**ASCIIDEFOND** · 23/01/2024, 18h45

Salut maxtrident,

Ou alors avec une expression régulière.

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
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta id="viewport" content="width=device-width, initial-scale=1">
 
  <style>
    div {
      margin: 0;
      padding-bottom: 10px;
    }
 
    span {
      width: 7em;
      display: inline-block;
      font-size: 1.2em;
      text-align: right;
    }
 
    input {
      outline: none;
      text-align: left;
      border: 1px solid gray;
      font-size: 1.2em;
    }
 
    input {
      width: 140px;
    }
  </style>
 
</head>
 
<body>
  <div>
    <span> n° de téléphone: </span>
    <input class="champ-tel" pattern="[0-9]{10}" placeholder="10 chiffres" maxlength="10" />
    <span>Champ suivant: </span>
    <input class="champ-suivant" />
  </div>
 
  <script>
    const champs = document.querySelectorAll('input')
 
    champs[0].addEventListener('keyup', () => {
      let longueur = champs[0].getAttribute('maxlength'), valeur = champs[0].value, regx
 
      if (valeur.length == longueur) { // Si les dix chiffres sont présents
        regx = /(\d+)(\d{2})/
 
        while (regx.test(valeur)) {
          valeur = valeur.replace(regx, '$1' + '.' + '$2') // on ajoute un point après chaque correspondance (2 chiffres)
        }
 
        champs[0].value = valeur // on l'affiche dans le champ
        champs[1].focus() // focus sur le champ suivant
      }
    })
 
  </script>
 
</body>
 
</html>

**maxtrident** · 23/01/2024, 19h09

salut, ASCIIDEFOND
merci pour ton code je vais tester demain et essayer de le modifier pour du type tel avec point.

j'ai essayer de faire ça mais l’événement ne s’arrête pas et plante mon navigateur...je ne vois pas ou ça cloche.

Code html :

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

1
2
	<label for="telp"> Votre N° Tel:</label>
	<input type="tel" name="tel" id="telp" onkeyup="verif_tel(this);" maxlength="15" pattern="^[.0-9]+$" value="<?php if (!empty($tel)){echo $tel;} ?>"/>

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
function verif_tel(champ)
  {
	var chiffres = new RegExp("[0-9]");
	let verif;
	let points = 0;
	let num;
	let numtel = "";
	let nochiffre = false;
 
	for(x = 0; x < champ.value.length; )
	{
		//verif si chiffre
            verif = chiffres.test(champ.value.charAt(x));
			num = champ.value.charAt(x);
 
		//verif si num = . ou ,	
			if(num == '.' && (x == 2 || x == 5 || x == 7 || x == 9)){
					num = '.';
					nochiffre = true;
				} else if (num == ',' && (x == 2 || x == 5 || x == 7 || x == 9)){
					num = '.';	
					nochiffre = true;
				} else if (verif == false){
					num = '';	
					nochiffre = true;
				}	
			if(nochiffre == true){
				numtel = numtel+num;
				x--;
			}				
 
			if((verif == true || num == '.') && x <= 9 && nochiffre == false){
			if(x == 2 || x == 4 || x == 6 || x == 8){
					num = '.'+num;
			}
			numtel = numtel+num;
			x++;
			}
			console.log(x);
			console.log(numtel);
		if(	x > 9 || x < 0){
			break;
		}
		nochiffre = false;
 
	}
	document.getElementById('telp').value = numtel;
  }

**ASCIIDEFOND** · 23/01/2024, 22h02

Je confirme, ça boucle jusqu'au plantage du navigateur.

Il y a beaucoup de conditions pour un formatage et un filtrage des touches.
Le code proposé plus haut devrait répondre en partie à ce que tu souhaites faire, la seule chose qui diffère est que les points apparaîtront une fois les 10 chiffres saisis.

Je rajoute ce bout de code qui gérera les touches autorisées pour la saisie. (Ce n'est pas la panacée et il y a surement mieux, mais ça fonctionne)

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
   // Les touches autorisées [0-9], Backspace, Delete et Tab pour le champ numéro de téléphone
    champs[0].addEventListener("keydown", function (event) {
      let CodeTouche = (event.which) ? event.which : event.keyCode
 
      if (CodeTouche === 9 || CodeTouche === 8 || CodeTouche === 46) {
        return
      }
 
      if ((CodeTouche > 95 && CodeTouche < 106) || (CodeTouche > 47 && CodeTouche < 58)) {
        return
      } else {
        event.preventDefault();
      }
    })

**Doksuri** · 24/01/2024, 09h45

quelque chose comme ca ?

Code html :

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

<input type="text" id="phone" placeholder="votre numero" />

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementById('phone').addEventListener('keyup', function(e) {
if(e.key === '.') {
return;
}
	let val = this.value.replaceAll('.','');
  val = val.split('').map((x,i) => {
  	if(i > 0 && i%2 === 0) {
    return `.${x}`;
    }
    return x;
  });
  this.value = val.join('');
});

Afficher un point automatiquement avec input type=tel

JavaScript

Vue hybride

Discussions similaires

Partager

Partager