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

});

它在chrome上完美运行但在firefox上我无法退回输入..任何想法？

这是一个jsfiddle来说明：

https://jsfiddle.net/jd1mwp3p/

Answer 1

您需要过滤不可打印的按键事件，以防浏览器触发它们。

例如，对于退格：

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

Answer 2

使用.keydown，您无需担心是否退格！因为它可以用于任何按下的键。

Answer 3

这里有两件事要考虑。

第一个是不同的浏览器以不同方式处理keypress，keyup，keydown。特别是当涉及到不可打印的字符（例如退格键）时，某些浏览器会触发按键事件，而某些浏览器则会触发。 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() + " ");
        }
    }

因此。 Chrome会忽略您的按键事件，只会删除字符，firefox会调用您的事件，而您也不会处理退格。

在keypress jquery函数上，退格不起作用

3 个答案: