Javascript Texte de Saisie de Masquage sans Plugin

Je veux masquer le texte dans une zone de saisie sans changer la valeur réelle. Je ne peux pas utiliser tous les plugins.

Je suis actuellement en train de faire cela, mais comme vous pouvez le voir, le problème est que la valeur réelle est changé sur "soumettre". Comment puis-je changer l'affichage de la valeur?

$("input[name='number']").focusout(function(){
    var number = this.value.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
    this.value = number;
}
  • Le <input> élément n'a pas une valeur d'affichage. La valeur de l'entrée est ce que voit l'utilisateur. Vous souhaitez créer 2 entrées: l'une est de la valeur réelle, l'autre pour l'affichage et éventuellement la prise d'entrée de l'utilisateur.
  • Comment aimeriez-vous que le masque de formater le contenu?
  • le masque de format identique à la fonction ci-dessus 00-000-00. Ajouter des tirets à 8 chiffres
  • J'ai créé une solution pour vous basé sur le format demandé.
InformationsquelleAutor user1392897 | 2016-11-09
  1. 10

    Vous avez besoin de deux entrées

    Deux entrées doivent faire le travail. Une entrée contiendra le texte masqué et l'autre sera un caché d'entrée qui contient les données réelles. 

    <input type="text" name="masknumber">
<input type="text" name="number" style="display:none;">

    La façon dont j'ai abordé le masquage est de construire une fonction de masquage et le démasquage le contenu de sorte que tout reste uniforme. 

    $("input[name='masknumber']").on("keyup change", function(){
        $("input[name='number']").val(destroyMask(this.value));
    this.value = createMask($("input[name='number']").val());
})

function createMask(string){
    return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
}

function destroyMask(string){
    return string.replace(/\D/g,'').substring(0,8);
}

    Travail JSFiddle

    InformationsquelleAutor DominicValenciana
  2. 0

    ou aussi

    <input type="text" onkeypress="handleMask(event, 'data: 99/99/9999 99:99 999 ok')" placeholder="data:  ok" size=40>

    avec

    function handleMask(event, mask) {
with (event) {
stopPropagation()
preventDefault()
if (!charCode) return
var c = String.fromCharCode(charCode)
if (c.match(/\D/)) return
with (target) {
var val = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
var pos = selectionStart + 1
}
}
var nan = count(val, /\D/, pos) //nan va calcolato prima di eliminare i separatori
val = val.replace(/\D/g,'')
var mask = mask.match(/^(\D*)(.+9)(\D*)$/)
if (!mask) return //meglio exception?
if (val.length > count(mask[2], /9/)) return
for (var txt='', im=0, iv=0; im<mask[2].length && iv<val.length; im+=1) {
var c = mask[2].charAt(im)
txt += c.match(/\D/) ? c : val.charAt(iv++)
}
with (event.target) {
value = mask[1] + txt + mask[3]
selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\D/, pos) - nan)
}
function count(str, c, e) {
e = e || str.length
for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
return n
}
}
    InformationsquelleAutor Giacomo