正文 4157字数 181,481阅读

style.css
@charset "utf-8"; ul{margin:0;padding:0;} ul li{list-style-type:none;} /*bigGlass*/ #bigGlass{height:45px;position:absolute;background-color:#8AD151;display:none;line-height:45px;font-size:30px;font-weight:bold;padding:0 5px;} #bigGlass span{margin-left:8px;} #bigGlass span:first-child{margin-left:0;}
Run code
Cut to clipboard

    html
    <link type="text/css" rel="stylesheet" href="css/style.css"/> <div style="width:720px;margin:0 auto;"> 身份证：<input id="cardCode" type="text" style="width:180px;height:23px;margin-top:200px;padding-left:10px;"/> 手机号：<input id="cardCode1" type="text" style="width:180px;height:23px;margin-top:200px;padding-left:10px;"/> </div> <script type="text/javascript" src="http://www.zhaotexiao.com/common/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/bigGlass.js"></script>
    Run code
    Cut to clipboard

      bigGlass.js
      $.fn.bigGlass = function(type){ /* * type 1: 身份证 2：电话号码 * 号码放大镜随着字数延伸 * 身份证分割： 3 3 4 4 4 手机号码分割： 3 4 4 */ var glassT = $(this).offset().top, glassL = $(this).offset().left;//定义预展示输入框的坐标 var gId = $(this).attr("id"); var glassStr = '<div id="bigGlass"><nobr><span></span><span></span><span></span><span></span></nobr></div>'; $(this).after($(glassStr)); $(this).keyup(function(){ showBigGlass(); }) //生成放大镜 function showBigGlass(){ var inputVal = $("#"+gId).val(), l = inputVal.length; $("#bigGlass").css({"top":(glassT-50)+"px","left":glassL+"px"}); style="top:'+(glassT-50)+'px;left:'+glassL+'px;" if(!inputVal){ $("#bigGlass").hide(); return false; } //身份证号码与电话号码展示逻辑不同，做区分 $("#bigGlass").html('<nobr><span></span><span></span><span></span><span></span></nobr>'); if(type == 1){ if(l <= 3){ $("#bigGlass").find("span").eq(0).text(inputVal); }else if(l <= 6){ $("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3)); $("#bigGlass").find("span").eq(1).text(inputVal.substring(3,l)); }else if(l <= 14){ $("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3)); $("#bigGlass").find("span").eq(1).text(inputVal.substring(3,6)); $("#bigGlass").find("span").eq(2).text(inputVal.substring(6,l)); }else{ $("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3)); $("#bigGlass").find("span").eq(1).text(inputVal.substring(3,6)); $("#bigGlass").find("span").eq(2).text(inputVal.substring(6,14)); $("#bigGlass").find("span").eq(3).text(inputVal.substring(14,l)); } }else{ if(l <= 3){ $("#bigGlass").find("span").eq(0).text(inputVal); }else if(l <= 7){ $("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3)); $("#bigGlass").find("span").eq(1).text(inputVal.substring(3,l)); }else{ $("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3)); $("#bigGlass").find("span").eq(1).text(inputVal.substring(3,7)); $("#bigGlass").find("span").eq(2).text(inputVal.substring(7,l)); } } $("#bigGlass").show(); } //控制数字放大镜的显示与销毁 $(document).click(function(event){ var obj = event.srcElement || event.target; if($(obj).attr("id") != gId){ $("#bigGlass").html("").hide(); }else{ showBigGlass(); } }); } $(function(){ $("#cardCode").bigGlass(1); $("#cardCode1").bigGlass(2); })
      Run code
      Cut to clipboard