手机号码输入框

需要那么复杂吗？实际需求是什么？
用一个框就好了，用正则check。

输入框失去焦点后，判断一下号码是否合法，如果合法就把输入框隐藏起来显示一个DIV的内容，这个DIV的内容里放三个SPAN，根据你的需求设置为不同颜色，截取输入框里的字符显示到不同SPAN里，当点击DIV的时候把DIV隐藏，并显示输入框

$.fn.bigGlass = function(){
var glassT = $(this).offset().top, glassL = $(this).offset().left;
var glassStr = "<div id='colorGlass'><nobr><span></span><span></span><span></span></nobr><div>";
$(this).after($(glassStr));
var inputVal = "" ;
$(this).keyup(function(){
$("#getValue").val(inputVal+$("#num").val()) ;
$("#num").val("") ;
inputVal = $("#getValue").val() ;
var l = inputVal.length ;
showBigGlass(l);
});

function showBigGlass(l){
$("#colorGlass").css({"top":(glassT)+"px","left":glassL+"px"});
$("#colorGlass").css("z-index","99");
style="top:'+(glassT)+'px;left:'+glassL+'px;";
if(!inputVal){
$("#colorGlass").hide();
return false;
}
$("#colorGlass").html('<nobr><span></span><span></span><span></span></nobr>');
if(l <= 3){
$("#colorGlass").find("span").eq(0).css("color","red");
$("#colorGlass").find("span").eq(0).text(inputVal);
}else if(l <= 6){
$("#colorGlass").find("span").eq(0).css("color","red");
$("#colorGlass").find("span").eq(0).text(inputVal.substring(0,3));
$("#colorGlass").find("span").eq(1).css("color","blue");
$("#colorGlass").find("span").eq(1).text(inputVal.substring(3,l));
}else {
$("#colorGlass").find("span").eq(0).css("color","red");
$("#colorGlass").find("span").eq(0).text(inputVal.substring(0,3));
$("#colorGlass").find("span").eq(1).css("color","blue");
$("#colorGlass").find("span").eq(1).text(inputVal.substring(3,7));
$("#colorGlass").find("span").eq(2).css("color","green");
$("#colorGlass").find("span").eq(2).text(inputVal.substring(7,l));
}
$("#colorGlass").show();
}
}
$(function(){
$("#num").bigGlass();
})<style type="text/css">
body{ margin: auto ;padding: auto ;}
#showText{ margin:auto ; width: 300px ; height:25px; border: solid 1px blue ; }
#num{border: none ; width:100%; height: 100%;}
#colorGlass{position:absolute;z-index: 99;}
</style>
<div id="showText">
<input type="text" id="num" name="num" />
<input type="hidden" id="getValue" name="num" />
</div>

body里面可以把字体大小设置成20px

直接贴代码吧，删除这里还有些问题
<head>
    <title></title>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
      body{font-family: 宋体;font-size:30px;}
      .inputclass{font-family: 宋体;font-size:30px;border:none;height:30px;color:transparent;z-index:100;}
      span{height:30px;position:absolute;}
    </style>
    <script type="text/javascript">
        $(function () {
            var divContentJQ = $("#divContent");
            var InputNumJQ = $("#inputNum");
            var InputNumOffset = InputNumJQ.offset();
            InputNumJQ.keydown(function (e) {
                if ((e.which >= 96 && e.which <= 105) || (e.which >= 48 && e.which <= 57)) {
                    if ($(this).val().length == 0) {
                        var FirstSpanJQ = divContentJQ.children("span").eq(0);
                        if (FirstSpanJQ.length == 0) {
                            $("<span style=\"color:red;left:" + InputNumOffset.left + "px;top:" + InputNumOffset.top + "px;\"></span>").appendTo(divContentJQ);
                        }
                    } else if ($(this).val().length == 3) {
                        var FirstSpanJQ = divContentJQ.children("span").eq(0);
                        var CenterSpanJQ = divContentJQ.children("span").eq(1);
                        if (CenterSpanJQ.length == 0) {
                            var left = InputNumOffset.left + FirstSpanJQ.width();
                            $("<span style=\"color:blue;left:" + left + "px;top:" + InputNumOffset.top + "px;\"></span>").appendTo(divContentJQ);
                        }
                    } else if ($(this).val().length == 7) {
                        var FirstSpanJQ = divContentJQ.children("span").eq(0);
                        var CenterSpanJQ = divContentJQ.children("span").eq(1);
                        var LastSpanJQ = divContentJQ.children("span").eq(2);
                        if (LastSpanJQ.length == 0) {
                            var left = CenterSpanJQ.position().left + CenterSpanJQ.width();
                            $("<span style=\"color:green;left:" + left + "px;top:" + InputNumOffset.top + "px;\"></span>").appendTo(divContentJQ);
                        }
                    }                } else {                }
            });
            InputNumJQ.keyup(function (e) {
                //if ((e.which >= 96 && e.which <= 105) || (e.which >= 48 && e.which <= 57)) {
                var ThisVal = $(this).val();
                if (ThisVal.length <= 3) {
                    var FirstSpanJQ = divContentJQ.children("span").eq(0);
                    FirstSpanJQ.text(ThisVal);
                } else if (ThisVal.length > 3 && ThisVal.length <= 7) {
                    var CenterSpanJQ = divContentJQ.children("span").eq(1);
                    CenterSpanJQ.text(ThisVal.substr(3, ThisVal.length - 3));
                } else if (ThisVal.length > 7 && ThisVal.length <= 11) {
                    var CenterSpanJQ = divContentJQ.children("span").eq(2);
                    CenterSpanJQ.text(ThisVal.substr(7, ThisVal.length - 7));
                }            });
        });
    </script>
</head>
<body>
    <div id="divContent" style="background-color:Gray;padding:4px;">
       <input id="inputNum" class="inputclass" type="text"/>
    </div>
</body>
</html>

美化的东西让设计师搞。手机号：<input type="text" onkeyup="k(this)" maxlength="13" />
<p id="tel"></p>
<script type="text/javascript">
function k(obj){
    var arr = ["red","blue","green"],i = 0,str = "";
    obj.value = obj.value.replace(/[^\s\d]/g,'').replace(/(^(\d{3})|(\d{4}))(?=[^\s])/g,'$1 ');
    document.getElementById("tel").innerHTML = obj.value.replace(/(\d+)/g,function(a){
        return str + '<span style="color: '+arr[i++]+'">'+a+'</span>';
    })
}
</script>

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Temp Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<div id="content">
<input type="text" id="phone" style="z-index:99;color:white;" maxlength="11" />
</div>
<script type="text/javascript">
$('#phone').keyup(function(e){
if(e.keyCode >=96 && e.keyCode <=105 || e.keyCode >=48 && e.keyCode <=57 || e.keyCode == 8 || e.keyCode == 46){
// var c = e.keyCode * 1;
// if(c >= 96 && c <= 105) c -= 48;
// var k    = String.fromCharCode(c),
var left   = $(this).offset().left + 5,
top    = $(this).offset().top,
height = $(this).height(),
obj    = $(this),
css    = {'left':left,'top':top,'height':height,'position':'absolute','font-weight': 'bold'}; var r      = obj.val();
if(r.length <= 3){
css.color = '#d92731';
$('#first,#second,#third').remove();
$('<span id="first"></span>').appendTo('#content').css(css).text(obj.val().substr(0,3));
}
else if(r.length > 3 && r.length <= 7){
css.color = '#66d9ef';
css.left  = $('#first').width() + 20;
$('#second,#third').remove();
$('<span id="second"></span>').appendTo('#content').css(css).text(obj.val().substr(3,4));
}else{
css.color = '#5d42ef';
css.left  = $('#first').width() + $('#second').width() + 25;
$('#third').remove();
$('<span id="third"></span>').appendTo('#content').css(css).text(obj.val().substr(7,4));
}
}else{
this.value = this.value.replace(/\D/g,'');
}
})
</script>
</body>
</html>

调试易

手机号码输入框

解决方案 »