Auto-formatage input type tel

Résolu/Fermé

PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 - 21 févr. 2024 à 08:41
PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 - 21 févr. 2024 à 15:32

Bonjour,

Je cherche à "auto formater" mon input tel afin d'obtenir automatique le format XXXXXXXXXX quelque soit ce que l'utilisateur puisse taper.

je ne sais pas si cela doit se faire avec une fonction pré-existante ou une programmation autre.

Merci d'avance

A voir également:

Auto-formatage input type tel
Formatage clé usb - Guide
Formatage pc - Guide
Telecharger auto refresh - Télécharger - Divers Web & Internet
Incompatibilité de type vba ✓ - Forum Programmation
Formatage apfs - Guide

3 réponses

Réponse 1 / 3

PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 1
21 févr. 2024 à 10:26

@lors j'ai trouvé un code mais je cherche à l'adapter à mon cas

<form>
  <label for="#phone-input">Phone number<span class="required">*</span></label>
<input id="phone-input" type="tel" value="" name="PhoneIn" aria-label="Please enter your phone number" placeholder="ex. 1(111)-111-1111">
  <p>Please fill out the information above.</p>
</form>

function phoneMask() { 
    var num = $(this).val().replace(/\D/g,''); 
    $(this).val(num.substring(0,1) + '(' + num.substring(1,4) + ')' + num.substring(4,7) + '-' + num.substring(7,11)); 
}
$('[type="tel"]').keyup(phoneMask);

mais qu'est ce qui relie le code html au code javascript ?

merci

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 744
21 févr. 2024 à 11:37

Bonjour,

Tu peux mettre ton script dans ton fichier html ( en le plaçant entre balises <script></script> avant le </body> de ta page.

Puis penses à vider le cache de ton navigateur avant de tester..

PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 1 > jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025
Modifié le 21 févr. 2024 à 11:55

Bonjour @jordane45 StatutModérateur

c'est bien ce que j'ai fait mais :

j'ai la ligne de script qui s'affiche en haut de la page

head :

<script>
function phoneMask() { 
    var num = $(this).val().replace(/\D/g,''); 
    $(this).val(num.substring(0,10)); 
}
$('[type="tel"]').keyup(phoneMask);
</script>

html:

      <div class="row mb-3">
            <input name="tel" type="tel" placeholder="0000000000"  />
      </div>

et cela ne fonctionne pas :-(

https://www.sapa-traitement.com/formulaire.php

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 744 > PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024
21 févr. 2024 à 12:05

Alors.... non..... tu n'as pas fait ce que je t'ai mis...

Relis bien et applique...

jless > PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024
21 févr. 2024 à 14:04

Ce script requiert jQuery ($), essaye comme ceci :

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('[type="tel"]');

    for (const input of inputs) {
      input.addEventListener('input', () => {
        input.value = phoneMask(input.value);
      });
    }

    function phoneMask(value) {
      return value.replace(/\D/g, '').substring(0, 10);
    }
  });
</script>

PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 1 > jless
21 févr. 2024 à 14:19

Bonjour @jless

merci beaucoup cela fonctionne parfaitement !

Réponse 2 / 3

Phil_1857 Messages postés 1872 Date d'inscription lundi 23 mars 2020 Statut Membre Dernière intervention 28 février 2024 168
21 févr. 2024 à 10:47

Bonjour,

Ta demande est imprécise

auto formater: c'est à dire ?

mon imput : quel input ?

Dans quel contexte ?

Réponse 3 / 3

PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 1
21 févr. 2024 à 11:00

Bonjour @Phil_1857 StatutMembre,

je suis dans un formulaire html de contact.

mon input en question est celui du tel.

je souhaite que le tel soit formater en 0102030405 même si l'utilisateur met des points ou des espaces.

Merci

PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 1
21 févr. 2024 à 11:08

j'ai trouvé cette fonction javascript :

function phoneMask() { 
    var num = $(this).val().replace(/\D/g,''); 
    $(this).val(num.substring(0,1) + num.substring(1,4) + num.substring(4,7) + num.substring(7,10)); 
}
$('[type="tel"]').keyup(phoneMask);

mais je ne sais pas comment l'utiliser

Discussions similaires

input signal out of range

Code de réinitialisation Samsung

code de réinitialisation de samsung GT-E1205T

Code formatage du telephone samsung

comment désactiver out of range