Javascript Input框输入内容自动分组

昨天在找资料的时候，无意发现一片文章，是关于在输入框中输入时，每四位自动加空格。

看了十多分钟，觉得文中所用的方法实在太麻烦了，于是按自己的思路考虑一个更简单的方法：

document.getElementById("yourId").addEventListener("input", function(){
   var tmp = document.getElementById("yourId").value;
   if ((tmp.length+1)%5===0)
   {
       tmp = tmp + " ";
   }
   document.getElementById("yourId").value = tmp;
});

So easy，不是吗？

可是事情并不是这么简单滴，虽然实现了每4位自动加空格，可是删除的时候，却删不了空格，因为程序会立刻自动添加空格。

晕，掉坑里了！

不过思路方向应该是对滴，苦思冥想30分钟，尝试过几次失败后，终于想到一个方法：

要考虑删除的情况，那就只能重组输入框的内容了！

document.getElementById("yourId").addEventListener("input", function(){
    var op="";
    var tmp = document.getElementById("yourId").value.replace(/\s/g, "");
    for (var i=0;i<tmp.length;i++)
    {
        if (i%4===0 && i>0)
        {
            op = op + " " + tmp.charAt(i);
        } else {
            op = op + tmp.charAt(i);
        }
    }
    document.getElementById("yourId").value = op;
});

以前不知道有charAt这个东东，还得把字符串转成数组，然后再转回字符串…尴尬

嗯嗯，好了，这样基本就OK了。再回头看看别人的文章，还有限制只能输入数字，那这个就简单了，只需要把第三行的正则表达式修改一下就可以实现：

var tmp = document.getElementById("yourId").value.replace(/\D/g, "");

DOM代码比较长，不利于压缩和review，所以顺手也写了jQuary的方法，看起来清爽多了：

$(document).on('input propertychange', '#yourId', function(){
   var op="";
   var tmp = $(this).val().replace(/\D/g, "");
   for (var i=0;i<tmp.length;i++)
   {
       if (i%4===0 && i>0)
       {
           op += " " + tmp.charAt(i);
       } else {
           op += tmp.charAt(i);
       }
   }
   $(this).val(op);
});

BTW：说明一下，加入propertychange事件是为了兼容一些老浏览器。

那么，问题来了，如果想改成手机号码的 3-4-4 格式呢？你知道怎么改吗？

还有，以上实例可应用在输入日期或MAC地址等数据时自动添加分割符哦~~