Auto-formatage input type tel
Résolu
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
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
A voir également:
- Auto-formatage input type tel
- Formatage exfat - Guide
- Auto click - Télécharger - Divers Utilitaires
- Auto keyboard - Télécharger - Divers Utilitaires
- Formatage pc - Guide
- Clear type - Guide
3 réponses
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
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
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
21 févr. 2024 à 10:47
Bonjour,
Ta demande est imprécise
auto formater: c'est à dire ?
mon imput : quel input ?
Dans quel contexte ?
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
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
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
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..
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
J
21 févr. 2024 à 12:05
Alors.... non..... tu n'as pas fait ce que je t'ai mis...
Relis bien et applique...
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>21 févr. 2024 à 14:19
Bonjour @jless
merci beaucoup cela fonctionne parfaitement !
J