2016-07-20 24 views
3

ich eine Funktion implementiert, die so automatisch wie Leerraum hinzufügen:auf keypress jquery Funktion funktioniert Backspace nicht

+33 6 XX XX XX XX 

oder

06 XX XX XX XX 

Hier ist das Skript:

$('#num').keypress(function(){ 
    $this = $(this); 
    //remove whitespaces to calculate the length of the string 
    $val = $this.val().replace(/\s+/g, ''); 
    //if it's the case '+33 6 XX XX XX XX 
    if ($val.toLowerCase().indexOf("+") >= 0 | $val == "") 
    { 
    if($val.length == 3){ 
      $this.val($this.val() + " "); 
     }else if($val.length == 4){ 
      $this.val($this.val() + " "); 
     }else if ($val.length >= 5 && ($val.length)%2 == 0){ 
      $this.val($this.val() + " "); 
     } 
    }else{ 
     if (($val.length)%2 == 0){ 
      $this.val($this.val() + " "); 
     } 
    } 

}); 

Es funktioniert perfekt auf Chrom, aber auf Firefox kann ich die Eingabe nicht rückgängig machen .. Irgendwelche Ideen? Hier

ist ein jsfiddle zu erläutern:

https://jsfiddle.net/jd1mwp3p/

+0

Beachten Sie, dass es in UX-Perspektive auch nicht wirklich in Chrome funktioniert. Ein Beispiel - geben Sie eine Zahl ein und stellen Sie fest, dass Sie zwei Ziffern transponiert haben. Wählen Sie sie aus und versuchen Sie, sie richtig zu übertönen. –

+0

Oh, richtig, habe das nicht versucht ... Das ist komisch, mache ich etwas falsch? –

Antwort

0

Es gibt zwei Dinge über hier zu denken.

Die erste ist, dass verschiedene Browser Tastenkombination, Tastenfolge, Tastenfolge, anders behandeln. Insbesondere wenn es sich um nicht druckbare Zeichen handelt, wie z. B. die Rücktaste, wird bei einigen Browsern das Tastendruckereignis ausgelöst, bei anderen nicht. Firefox tut, und Chrome nicht.

Jetzt, wenn Sie Ihren Code betrachten, berücksichtigen Sie nicht die Rücktaste. In der Tat, was Sie tun, ist das Hinzufügen eines Raumes, wenn es keine + ist unterzeichnen und der Wert gerade ist:

else{ 
     if (($val.length)%2 == 0){ 
      $this.val($this.val() + " "); 
     } 
    } 

und Sie wieder ein Leerzeichen, wenn der Wert 3 4 oder 5 Zeichen lang, wenn ein + oder ist Wert ist leer:

if ($val.toLowerCase().indexOf("+") >= 0 | $val == "") 
    { 
    if($val.length == 3){ 
      $this.val($this.val() + " "); 
     }else if($val.length == 4){ 
      $this.val($this.val() + " "); 
     }else if ($val.length >= 5 && ($val.length)%2 == 0){ 
      $this.val($this.val() + " "); 
     } 
    } 

So. Chrome ignoriert Ihr keypressed -Ereignis und löscht nur die Zeichen, firefox ruft Ihr Ereignis auf und Sie behandeln Backspace nicht.

+0

Vielen Dank, aber es ist keine Antwort! Tastenkürzel-Funktion erlaubt nicht mit nicht druckbaren Tasten wie Rücktaste umgehen ... –

+0

der Schlüsselcode für die Rücktaste sollte 8 und 46 zum Löschen sein. Wie ich bereits erwähnt habe, rufen nicht alle Browser den Tastendruck auf Backspace auf, also würde ich wahrscheinlich keyup verwenden –

+0

Sie können es sogar so lassen und eine if-Anweisung zurückgeben, wenn der Schlüsselcode 8 ist. Browser, die das Ereignis nicht auslösen, funktionieren sowieso. und Browser, die tun werden –

1

Sie müssen nicht druckbare Tastendruckereignisse filtern, falls der Browser sie auslöst.

Zum Beispiel für Backspace:

$('#num').keypress(function(e) { 
    if(e.keyCode == 8) { 
    return true; 
    } 
    $this = $(this); 
    // etc. 
} 
1

die .keydown verwenden und Sie müssen über die Überprüfung, ob Backspace keine Sorge oder nicht! weil es mit jeder gedrückten Taste funktioniert.