Auto Format Telefonnummer in Jquery

Question

Ich habe ein Textfeld für die Telefonnummer. Meine Telefonnummer sollte XXX-XXX-XXX wie dieses Format sein.

Ich habe die Lösung für XXX-XXX-XXX-Format, aber ich weiß nicht, wie Sie diesen Code ändern.

$('#ssn').keyup(function() { 
    var val = this.value.replace(/\D/g, ''); 
    var newVal = ''; 
    while (val.length > 3) { 
     newVal += val.substr(0, 3) + '-'; 
     val = val.substr(3); 
    } 
    newVal += val; 
    this.value = newVal; 
}); 

http://jsfiddle.net/ssthil/nY2QT/

Answer 1

Da Sie jQuery verwenden Sie Jquery masked-input-plugin versuchen.

Es gibt eine jsFiddle für Sie here wo Sie sehen können, wie es funktioniert.

Der Quellcode für das Projekt auf GitHub kann here gefunden werden.

Die Implementierung ist mehr als einfach:

HTML:

<input id="ssn"/> 

javascript:

$("#ssn").mask("999-999-999"); 

UPDATE:

Ein weiteres gutes here gefunden werden kann.

Answer 2

Soweit ich trainieren kann, alles, was Sie wirklich tun müssen, ist dies:

$('#ssn').keyup(function() 
{ 
    this.value = this.value.replace(/(\d{3})\-?/g,'$1-'); 
}); 

aber das wird nur funktionieren, wenn die Leute Ziffern eingeben, so würde ich vorschlagen, eine eine zusätzliche Überprüfung der Einführung:

$('#ssn').keyup(function(e) { 
 
    if ((e.keyCode > 47 && e.keyCode < 58) || (e.keyCode < 106 && e.keyCode > 95)) { 
 
    this.value = this.value.replace(/(\d{3})\-?/g, '$1-'); 
 
    return true; 
 
    } 
 
    
 
    //remove all chars, except dash and digits 
 
    this.value = this.value.replace(/[^\-0-9]/g, ''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id="ssn">

Ein wenig mehr auf der regex /(\d{3})\-?/g:
Diese ersetzt Gruppe von 3 Ziffern mit sich selbst, gefolgt von einem Bindestrich. Die Klammern erzeugen einen Rückverweis auf die übereinstimmenden Ziffern, die in der Ersetzungszeichenfolge verwendet werden ($1- -> $ 1 ist die Rückreferenz).
Beachten Sie, dass ein optionaler Strich ebenfalls ersetzt wird, jedoch nicht in der Rückreferenz enthalten ist. Wenn die Eingabe 123 ist und das Ersetzen-Muster etwas wie /(\d{3})/g oder /(\d{3}\-?)/g wäre, würde der Wert 123-4, 123--45, 123---456 und so weiter werden, die Striche jedes Mal verdoppelt werden.

Warnung:
Dies wird dem Benutzer eine gewisse Trauer, da die Pfeiltasten geben und so nicht work.Luckily wird, das ist eine einfache Lösung: Einfach den folgenden Code an der Spitze Ihrer Funktion hinzu:

if (e.keyCode > 36 && e.keyCode < 41) 
{ 
    return true; 
} 

Und die Pfeile funktionieren gut. für andere Schlüssel (wie Löschen, Rücktaste, Verschiebung usw.) check this page.

Ein vollständiges Beispiel: here's the fiddle

Answer 3

Sie Eingabemaske auf ein beliebiges Feld in 3 einfachen Schritten einstellen:

1: Zunächst einmal nennen diese Bibliotheken http://code.jquery.com/jquery-1.7.2.min.js " " https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js "

2: Erstellen Sie ein einfaches Formular wie dieses:

<form> <input type="text" name="phone" id="phone" /> </form> 

3: Dann wird die Script-Code Vergangenheit in der Script-Tag ..

$ (document) .ready (function ($) {

$('#phone').mask("99999-9999999-9",{placeholder:""}); 

});

Answer 4

$('#ssn').keyup(function() { 
 
     var val = this.value.replace(/\D/g, ''); 
 
     var newVal = ''; 
 
     for(i=0;i<2;i++){ 
 
     if (val.length > 3) { 
 
      newVal += val.substr(0, 3) + '-'; 
 
      val = val.substr(3); 
 
     } 
 
     } 
 
     newVal += val; 
 
     this.value = newVal; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="ssn" maxlength="10"/>