Afficher un point automatiquement avec input type=tel

Version imprimable

23/01/2024, 12h24
maxtrident

Afficher un point automatiquement avec input type=tel

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.
23/01/2024, 13h32
unanonyme

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.

Salut maxtrident,

Ou alors avec une expression régulière.

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

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:

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:

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

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:

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

quelque chose comme ca ?

Code:

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

Code:

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

24/01/2024, 11h03
maxtrident

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
24/01/2024, 11h54
unanonyme

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.

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

Code:

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:

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

24/01/2024, 15h14
maxtrident

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.
24/01/2024, 16h32
ASCIIDEFOND

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. ;)
29/01/2024, 10h46
NoSmoking

Bonjour,

Citation:

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.

Citation:

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.

Citation:

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.

Citation:

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

Citation:

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.

Citation:

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 ?
01/02/2024, 10h22
domi65

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 :

Citation:

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.
01/02/2024, 11h36
NoSmoking

Citation:

Envoyé par domi65

Si je comprends bien, tu veux que l'entrée dans le champ soit du type "11.11.11.11.11".

:nono: il est dit

Citation:

Envoyé par maxtrident

... du style 010304 ça m'affiche le point automatiquement 01.03 ...

donc à la saisie, car comme tu le dis la vérification ne se fera qu'à la soumission, pas durant la frappe.