求输入框JS：输入16位卡号，输完4位自动加上空格


效果类似 支付宝的这个 “信用卡号”输入框：（输入的时候就自动加空格 不是输完了才加）
https://ccrprod.alipay.com/ccr/billEnteringNoLogin.htm
他这个也有点小BUG！
我写的BUG更多！ O(∩_∩)O~ 谢了！

解决方案 »

  1.   


    <script language="javascript">
    <!--
    var _length=0;
    function test(){
      var _o=document.getElementById("t");
      _length++;
      if(_length==4){
    _o.value+=' ';
    _length=0;
      }
    }
    //-->
    </script>
    <input type="text" style="width:200px;height:25px;" onkeyup="test()" name="t" id="t" />
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head> <title>test</title>
    <script type="text/javascript">
    window.onload = function() {
    document.getElementById("test").onkeyup = function() {
    this.value = this.value.replace(/(\d{4})(?:\d)/g,"$1 ");
    };
    };
    </script>
    </head>
    <body>
    <input type="text" id="test" />
    </body>
    </html>
      

  3.   

    这个有问题 试试这个<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head> <title>test</title>
    <script type="text/javascript">
    window.onload = function() {
    document.getElementById("test").onkeyup = function() {
    this.value = this.value.replace(/(\d{4})(?=\d)/g,"$1 ");
    };
    };
    </script>
    </head>
    <body>
    <input type="text" id="test" />
    </body>
    </html>
      

  4.   


      <script type="text/javascript">
        function test(obj)
    {
    var value = obj.value;
    value = value.replace(/\s*/g, "");
    var result = [];
    for(var i = 0; i < value.length; i++)
    {
    if (i % 4 == 0 && i != 0)
    {
    result.push(" " + value.charAt(i));
    }
    else
    {
    result.push(value.charAt(i));
    }
    }
    obj.value = result.join("");
    }
      </script>
    <input type="text" id="tt" onkeydown="test(this)" onblur="test(this)">
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script>
    function a(Xtext)
    {
        var str=Xtext.value;
        if(str.length<20)
        {
            if(str.length==4||str.length==9||str.length==14)
                Xtext.value=Xtext.value+" ";
        }
        else
            Xtext.value=Xtext.value.substring(0,Xtext.value.length-1);
    }
    </script>
    </head>
    <body>
    <input type="text" id="text1" onkeyup="a(this)"/>
    </body>
    </html>
      

  6.   

    你找寻下控制光标位置的方法~~这个只能满足你在前面补数字而不会影响格式化
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head> <title>test</title>
    <script type="text/javascript">
    window.onload = function() {
    document.getElementById("test").onkeyup = function() {
    this.value = this.value.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 ");;
    };
    };
    </script>
    </head>
    <body>
    <input type="text" id="test" />
    </body>
    </html>
      

  7.   

    OK 结贴！谢谢所有人！
    5楼的够用了另发个刚抠的建设银行用的 和5楼效果一样var str=(this.value).replace(/[^\d]/g, "");
    var maxlen = 16;
    if (str.length < maxlen) {
    maxlen = str.length;
    }
    var temp = "";
    for (var i = 0; i < maxlen; i++) {
    temp = temp + str.substring(i, i + 1);
    if (i != 0 && (i + 1) % 4 == 0 ) {
    temp = temp + " ";
    }
    }
    this.value=temp;
     正则这样比较好：replace(/[^\d]/g, "")  让用户不能输入 数字以外的字符