Comment implémenter une entrée avec un masque

Je voudrais implémenter un masque pour un champ de saisie de texte qui accepte une date. La valeur masquée doit apparaître directement à l’intérieur de l’entrée.

Quelque chose comme ça:

J’ai écrit le masque comme une valeur dans cet exemple, mais mon intention est de permettre aux gens d’écrire une date sans taper / ou - pour séparer les mois, les années et les jours. L’utilisateur doit pouvoir entrer des chiffres dans le champ affiché, tandis que le masque applique automatiquement le format au fur et à mesure que l’utilisateur tape.

J’ai vu ce comportement sur d’autres sites, mais je n’ai aucune idée de la façon dont cela fonctionne ou comment le mettre en œuvre moi-même.

Les masques d’entrée peuvent être implémentés à l’aide d’une combinaison de l’événement keyup et des HTMLInputElement value , selectionStart et selectionEnd . Voici une implémentation très simple qui fait une partie de ce que vous voulez. Ce n’est certainement pas parfait, mais fonctionne assez bien pour démontrer le principe:

 Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask); function applyDataMask(field) { var mask = field.dataset.mask.split(''); // For now, this just ssortingps everything that's not a number function ssortingpMask(maskedData) { function isDigit(char) { return /\d/.test(char); } return maskedData.split('').filter(isDigit); } // Replace `_` characters with characters from `data` function applyMask(data) { return mask.map(function(char) { if (char != '_') return char; if (data.length == 0) return char; return data.shift(); }).join('') } function reapplyMask(data) { return applyMask(ssortingpMask(data)); } function changed() { var oldStart = field.selectionStart; var oldEnd = field.selectionEnd; field.value = reapplyMask(field.value); field.selectionStart = oldStart; field.selectionEnd = oldEnd; } field.addEventListener('click', changed) field.addEventListener('keyup', changed) }

 ISO Date: 
 Telephone:

Après avoir lu tout le post, j’ai fait ma propre implémentation, j’espère aider quelqu’un:

L’idée est,

autoriser les numéros d’entrée seulement. (événement de frappe)
obtenir tous les nombres dans un tableau
remplacer chaque caractère “_” du masque par un nombre du tableau dans une boucle

Les améliorations sont les bienvenues.

 /** * charCode [48,57] Numbers 0 to 9 * keyCode 46 "delete" * keyCode 9 "tab" * keyCode 13 "enter" * keyCode 116 "F5" * keyCode 8 "backscape" * keyCode 37,38,39,40 Arrows * keyCode 10 (LF) */ function validate_int(myEvento) { if ((myEvento.charCode >= 48 && myEvento.charCode <= 57) || myEvento.keyCode == 9 || myEvento.keyCode == 10 || myEvento.keyCode == 13 || myEvento.keyCode == 8 || myEvento.keyCode == 116 || myEvento.keyCode == 46 || (myEvento.keyCode <= 40 && myEvento.keyCode >= 37)) { dato = true; } else { dato = false; } return dato; } function phone_number_mask() { var myMask = "(___) ___-____"; var myCaja = document.getElementById("phone"); var myText = ""; var myNumbers = []; var myOutPut = "" var theLastPos = 1; myText = myCaja.value; //get numbers for (var i = 0; i < myText.length; i++) { if (!isNaN(myText.charAt(i)) && myText.charAt(i) != " ") { myNumbers.push(myText.charAt(i)); } } //write over mask for (var j = 0; j < myMask.length; j++) { if (myMask.charAt(j) == "_") { //replace "_" by a number if (myNumbers.length == 0) myOutPut = myOutPut + myMask.charAt(j); else { myOutPut = myOutPut + myNumbers.shift(); theLastPos = j + 1; //set caret position } } else { myOutPut = myOutPut + myMask.charAt(j); } } document.getElementById("phone").value = myOutPut; document.getElementById("phone").setSelectionRange(theLastPos, theLastPos); } document.getElementById("phone").onkeypress = validate_int; document.getElementById("phone").onkeyup = phone_number_mask;

Vous pouvez également y parvenir en utilisant la méthode native de JavaScripts. C’est assez simple et ne nécessite aucune bibliothèque supplémentaire à importer.

Vous pouvez également essayer mon implémentation, qui n’a pas de délai après chaque pression sur une touche lors de la saisie du contenu, et qui prend entièrement en charge le retour arrière et la suppression.

Vous pouvez l’essayer en ligne: https://jsfiddle.net/qmyo6a1h/1/

 Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask); function applyDataMask(field) { var mask = field.dataset.mask.split(''); // For now, this just ssortingps everything that's not a number function ssortingpMask(maskedData) { function isDigit(char) { return /\d/.test(char); } return maskedData.split('').filter(isDigit); } // Replace `_` characters with characters from `data` function applyMask(data) { return mask.map(function(char) { if (char != '_') return char; if (data.length == 0) return char; return data.shift(); }).join('') } function reapplyMask(data) { return applyMask(ssortingpMask(data)); } function changed() { var oldStart = field.selectionStart; var oldEnd = field.selectionEnd; field.value = reapplyMask(field.value); field.selectionStart = oldStart; field.selectionEnd = oldEnd; } field.addEventListener('click', changed) field.addEventListener('keyup', changed) }

 Date: 
 Telephone:

Utilisez ce code: –