キー押下jqueryの機能に、バックスペースが

Question

動作しません。私はそう自動的に同じように空白を追加する機能を実装：ここ

+33 6 XX XX XX XX 

または

06 XX XX XX XX 

はスクリプトです：

$('#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() + " "); 
     } 
    } 

}); 

これは完全にクロームで動作しますが、Firefoxでは入力をバックスペースできません。ここで

は説明するjsfiddleです：

https://jsfiddle.net/jd1mwp3p/

Answer 1

ここで考える2つのものがあります。

最初の1つは、さまざまなブラウザでキー入力、キーアップ、キーダウンを別々に処理することです。特に、バックスペースなどの印刷不可能な文字については、一部のブラウザではキー入力イベントが発生し、一部のイベントでは発生しません。 Firefoxは機能し、Chromeは機能しません。

コードを見ると、バックスペースは考慮されません。

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

と値が3 4または5文字の場合は+またはそこにある長いときにもう一度スペースを追加します。そこには+が署名されていないと値が偶数であれば確かに、あなたは何をすべきかは、スペースを追加しています値が空です：

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はキー入力されたイベントを無視して文字列を削除し、firefoxはイベントを呼び出すため、バックスペースは処理されません。

Answer 2

ブラウザが発砲した場合に備えて、印刷不可能なキー押しイベントをフィルタリングする必要があります。

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

Answer 3

.keydownを使用して、バックスペースかどうかを確認する心配する必要はありません：バックスペースのために例えば

、！押されたどのキーでも機能するためです。