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('');
});

**maxtrident** · 24/01/2024, 11h03

Bonjour
c'est fou j'ai passé plus de 4 heures pour mon code de m....qui marche pas...et vous en 2 secondes c'est fait.
Merci à tous... il me reste plus qu'a faire une condition pour avoir que des chiffres.
je ne trouve pas de site qui parle de tous élément qu'on peut mettre pour addEventListener : souvent c'est click, change... je ne connaissais pas keyup

**unanonyme** · 24/01/2024, 11h54

Le plus dur n'est pas d'écrire un code qui semble fonctionner,

c'est de s'assurer qu'il fonctionne correctement sur l'ensemble des navigateurs ciblés.

Et sur un sujet aussi sensible que les évènements du clavier, ça peut vite devenir pénible.

**ASCIIDEFOND** · 24/01/2024, 12h20

Et rajouter aussi une restriction sur le champ pour empêcher d'insérer du texte non conforme via le presse-papiers.

Code javascript :

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

1
2
3
document.getElementById('telp').addEventListener('paste', e => {
    e.preventDefault()
})

Ou vérifier la compatibilité de la valeur du presse-papiers puis l'afficher dans le champ en insérant les séparateurs.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
document.getElementById('telp').addEventListener('paste', function (e) {
      let valeur = e.clipboardData.getData('text/plain') // On récupère la valeur du presse-papiers
      if (Number(valeur) && valeur.length == 10 ) { // Si la valeur récupérée est bien un nombre à 10 chiffres
          let regx = /(\d+)(\d{2})/
          while (regx.test(valeur)) {
            valeur = valeur.replace(regx, '$1' + '.' + '$2')
          }
          this.value = valeur
        } else {
          e.preventDefault()
        }
      })

**maxtrident** · 24/01/2024, 15h14

ok merci.
Est ce que tu connait une méthode pour avoir le format et émulation smartphone.
car avec du input type tel sur firefox vue adaptative, je ne voie pas le clavier.

**ASCIIDEFOND** · 24/01/2024, 16h32

Non désolé, je ne pourrai pas t'aider. Je ne suis pas du tout un fan de smartphone, j'en ai un qui prend plus la poussière que les appels.

**NoSmoking** · 29/01/2024, 10h46

Bonjour,

Envoyé par maxtrident

je voudrais quand l'utilisateur entre son n° de tel du style 010304 ça m'affiche le point automatiquement 01.03

Déjà là tu déroutes l'utilisateur, ceci n'étant pas une façon habituelle de présenter un numéro de téléphone.

En règle générale on saisie les chiffres deux par deux, tout du moins en France.

De plus, on ne saisie pas forcément à la suite et on à droit à l'erreur de saisie, donc au passage il faudrait également gérer la position du curseur à l'insertion.

Toujours garder à l'esprit qu'un utilisateur a besoin de chose simple, intuitive, il n'a pas envie de se prendre la tête, si il veut mettre un espace parce que c'est plus lisible autant le laisser faire.

Quoiqu'il arrive la vérification finale doit se faire côté serveur.

Envoyé par maxtrident

je vais tester demain et essayer de le modifier pour du type tel avec point.

Les <input type="tel">,comme les autres éléments de contrôle ont leur rendu qui diffère suivant les navigateurs, le support et l'environnement.

Si cela marche avec un type="text" alors cela devrait fonctionner avec un type="tel".

L'avantage du type="tel" est l'affichage optimisé sur certains devices et la possibilité d'utiliser un pattern. Mais est-ce un avantage, le pattern pouvant devenir contraignant à la saisie.

Envoyé par maxtrident

c'est fou j'ai passé plus de 4 heures pour mon code de m....qui marche pas...et vous en 2 secondes c'est fait.

Ton temps n'a pas été perdu et avant de faire cela en ~~2 secondes~~ 15 (30) minutes il y a eu des heures d’apprentissage/expérimentation passées en amont.

Envoyé par maxtrident

je ne trouve pas de site qui parle de tous élément qu'on peut mettre pour addEventListener

Une porte d'entrée : Référence des événements https://developer.mozilla.org/fr/docs/Web/Events

Envoyé par ASCIIDEFOND

Et rajouter aussi une restriction sur le champ pour empêcher d'insérer du texte non conforme via le presse-papiers.

Il faut penser aussi au drop insertFromDrop.

Dans ce cas il serait peut-être plus utile de gérer cela non pas avec l'événement keyup mais avec l'événement input directement.

Attention toutefois ce qui fonctionne bien avec un type d’événement peut ne pas le faire avec un autre type sans adaptation, les paramètres mis à disposition n'étant pas les même.

Envoyé par maxtrident

Est ce que tu connait une méthode pour avoir le format et émulation smartphone.

Un support tactile va simplement te proposer un « clavier » optimisé ni plus ni moins donc si ta fonction fait bien le job elle le fera également sur ce type de support.

Donc oui c'est faisable mais est-ce une bonne option ?

**domi65** · 01/02/2024, 10h22

Bonjour.
Si je comprends bien, tu veux que l'entrée dans le champ soit du type "11.11.11.11.11".
Tu n'as pas besoin de JS pour imposer cela. Il faut bien sûr que tu indiques à l'utilisateur ton exigence.
Il suffit d'ajouter cet attribut au champ :

pattern="[0-9]{2}.[0-9]{2}.[0-9]{2}.[0-9]{2}.[0-9]{2}"

Si ce que saisit l'utilisateur n'est pas conforme, le navigateur le signalera lors de la soumission et le formulaire ne sera pas soumis.