Anpassbare JQuery-Maske

Question

Ich habe mit einer Maskierungsfunktion gespielt, um Benutzern das Eintippen von Zahlen zu ermöglichen und diese nach einem bestimmten Muster zu maskieren.

Zum Beispiel sie geben 123456789, aber es erscheint im Feld als XXX-XX-6789

Im Moment habe ich es schwer zu einem Muster codiert, aber ich möchte dies erweitern, um es ihnen zu ermöglichen, was zu wählen jedes Muster, das sie wünschen. Dies ist vor allem, wenn ein Kunde eine Kundenkarte oder etwas in dieser Richtung hat. Gibt es eine einfache Möglichkeit, dies zu tun, ohne jedes Muster, das sie wollen, zu codieren?

Mein html

<p class="maskNum"> 
    <input type="text" class="form-control mask" autocomplete="off" maxlengthsocial="9" maxlength="11" /> 
    <input type="text" class="form-control maskval" autocomplete="off" maxlengthsocial="9" maxlength="9" /> 
</p> 

mein css

.maskNum { 
    position: relative; 
} 

.maskval { 
    position: absolute; 
    top: 0; 
    color: transparent !important; 
    background: transparent !important; 
    border: none; 
    left: 0; 
    text-indent: -9999px; 
} 

meine Jquery

var pattern = 'xxx-xx-0000' 

$('.maskval').on('keyup keydown change', function() { 
    var res = this.value, 
    len = res.length, 
    max = 9, 
    stars = len > 0 ? len > 1 ? len > 2 ? len > 3 ? len > 4 ? 'XXX-XX-' : 'XXX-X' : 'XXX-' : 'XX' : 'X' : '', 
    result = stars + res.substring(5), 
    truckResult = result.substring(0, 11); 
    $(this).prev('input').val(truckResult).trigger('change'); 
}); 

und eine Geige, die ich zu testen gemacht, was ich bisher gebaut habe. https://jsfiddle.net/5xwomLf7/8/

Answer 1

Wenn Ihr Muster nur Zahlen und x's enthalten werden:

var pattern = 'x0x-0x-00x0' 
$('.maskval').on('keyup keydown change', function() { 
    var input = $(this).val(); 
    var output = ""; 

    for (var x=0; x<input.length; x++){ 
     if (x < pattern.length){ 
      output = pattern[x]=='x' ? output + 'x' : output + input[x];   
     } else 
      output += input[x]; // or nothing if you want the value to be only as long as the pattern 
    } 

    if (input.length < pattern.length && pattern[input.length] == '-') { 
     output += '-'; 
     $(this).val(output); 
    } else { 
     $(this).prev('input').val(output); 
    } 
});