在按键 jquery 功能上，退格键不起作用

Question

我实现了一个自动添加白色 space 的功能：

+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 上我无法支持space 输入..有什么想法吗？

这里有一个 jsfiddle 来说明：

https://jsfiddle.net/jd1mwp3p/

Answer 1

这里有两点需要考虑。

第一个是不同的浏览器处理 keypress、keyup、keydown 的方式不同。特别是当涉及到不可打印的字符时，例如 backspace，一些浏览器会触发按键事件，而另一些则不会。 Firefox 有，Chrome 没有。

现在，如果您查看您的代码，您不会回头考虑space。实际上，如果没有 + 号且值为偶数，您所做的就是添加 space：

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

如果值是 3、4 或 5 个字符长且有 + 或值为空，则再次添加 space：

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 调用你的事件，你不处理回来space。

Answer 2

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

例如，退格：

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

Answer 3

使用.keydown，您就不用担心检查是否退格了！因为它可以在按下任何键的情况下使用。

在按键 jquery 功能上，退格键不起作用

on keypress jquery function, backspace doesn't work

javascript

jquery

keypress

onkeypress