文本框输入内容放大显示和格式化插件

　　在最近做的项目中，发现用户在输入手机号、身份证或者银行卡这些重要的数据的时候，文本框显示的文字不是非常大，也不是非常明显的显示给用户。

　　往往这些重要数据用户都需要核对好几次，在确保正确无误的时候才敢点击保存，这样总会浪费一点时间，对用户的体验也不是非常友好，如果我们能在用户输入框的上面对输入的内容进行放大、颜色突出并且按照不同的分隔显示，是不是这样更能便于用户快速的核实数据呢。

　　于是自己利用业务时间就动手封装了一个小插件：

　　第一步：创建一个样式表sytle.css

 1 @charset "utf-8";
 2 /*基本框架CSS*/
 3 body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
 4 h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
 5 body>div{margin:0 auto}
 6 div {text-align:left}
 7 a img {border:0}
 8 body { color: #333; text-align: center; font: 12px "宋体"; }
 9 ul, ol, li {list-style-type:none;vertical-align:0}
10 a {outline-style:none;color:#535353;text-decoration:none}
11 a:hover { color: #D40000; text-decoration: none}
12 .clear{height:0; overflow:hidden; clear:both}
13 .button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
14 }
15 .red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
16 }
17 .red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
18 .red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
19 
20 /*放大显示效果*/
21 #bigFont{height:45px;position:absolute;background-color:#8AD151;display:none;line-height:45px;font-size:30px;font-weight:bold;padding:0 5px;}
22 #bigFont span{margin-left:8px;}
23 #bigFont span:first-child{margin-left:0;}

View Code

　　第二步：创建事例页面demo.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>输入文字放大并格式化</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <link rel="stylesheet" type="text/css" href="css/style.css" />
10 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
11 <script type="text/javascript" src="js/fontmark.js"></script>
12 </head>
13 <style>
14     form{margin-top:20px;}
15     input[type='text']{display:inline-block;width:20%;height:30px; line-height:30px;text-indent:10px;}
16     .group{  display: inline-block;height:60px;line-height:60px;margin:2px 20px;width:100%;font-size:16pt;}    
17 </style>
18 <body>
19     <form action="">
20         <div class="group">银行卡：<input id="txtBank" type="text" /></div>
21         <div class="group">身份证：<input id="txtIdCard" type="text" /></div>
22         <div class="group">手机号：<input id="txtPhone" type="text" /></div>
23         <div class="group">默认值：<input id="txtDefault" type="text" /></div>
24     </form>
25 </body>
26 </html>
27 <script>
28     $(function(){
29         $("#txtBank").fontMark({
30             ipttype:3
31         });
32         $("#txtIdCard").fontMark({
33             ipttype:1
34         });
35         $("#txtPhone").fontMark({
36             ipttype:2
37         });
38         //默认
39         //$("#txtDefault").fontMark();
40         
41         //设置分隔符
42         // $("#txtDefault").fontMark({
43         //     separator:'-'
44         // });
45 
46         //设置分隔符分隔位数
47         $("#txtDefault").fontMark({
48             separator:"-",
49             sepnum:"3"
50         });
51     });
52 </script>

View Code

　　第三步：创建插件脚本文件fontmark.js

  1 /**
  2  * 
  3  * @authors Zeke (zhf_1206@126.com)
  4  * @date    2015-07-14 13:10:16
  5  * @version V1.0
  6  */
  7 
  8 (function($) {
  9     $.fn.fontMark = function(options) {
 10         /*
 11          *    说明：数字放大镜随着字数延伸
 12          *    ipttype ： 输入类型（0-默认  1-身份证   2-手机号   3-银行卡）
 13          *    separator：分隔符（空格 or 横线）
 14          *    sepnum：   分隔位数（默认0,1,2,3……）    
 15          *    seprule：  分隔规则默认（身份证： 3 3 4 4 4   手机号： 3 4 4   银行卡：4 4 4 4）
 16          */
 17         var defaults = {
 18             ipttype: 0,    //输入类型
 19             separator: ' ',//分隔符
 20             sepnum: 0,     //分隔位数
 21             seprule: []    //分隔规则数组
 22         };
 23         // Extend our default options with those provided.    
 24         var opts = $.extend({}, defaults, options);
 25         // Our plugin implementation code goes here. 
 26         $this = $(this);
 27 
 28         //定义预展示输入框的坐标
 29         var glassT = $this.offset().top,
 30             glassL = $this.offset().left;
 31         //定义放大显示的Html
 32         var glassStr = '<div id="bigFont"><nobr><span></span></nobr></div>';
 33         $this.after($(glassStr));
 34         $this.keyup(function() {
 35             $this = $(this);
 36             showBigInfoBox();
 37         });
 38         //分隔规则
 39         if (opts.sepnum == 0) {
 40             if (opts.ipttype == 1 && opts.seprule.length == 0) {
 41                 opts.seprule = [3, 3, 4, 4, 4];
 42             } else if (opts.ipttype == 2 && opts.seprule.length == 0) {
 43                 opts.seprule = [3, 4, 4];
 44             } else if (opts.ipttype == 3 && opts.seprule.length == 0) {
 45                 opts.seprule = [4, 4, 4, 4];
 46             } else {
 47                 opts.sepnum = 4;
 48             }
 49         }
 50 
 51         //求分隔规则数组开始值        
 52         function SumSeqRule(idx) {
 53             var starIdx = 0;
 54             for (var i = 0; i < idx; i++) {
 55                 starIdx += opts.seprule[i];
 56             }
 57             return starIdx;
 58         }
 59 
 60         //生成放大镜
 61         function showBigInfoBox() {
 62             var inputVal = $this.val(),
 63                 len = inputVal.length;
 64             $("#bigFont").css({
 65                 "top": (glassT - 50) + "px",
 66                 "left": glassL + "px"
 67             });
 68             var style = "top:'+(glassT-50)+'px;left:'+glassL+'px;"
 69             if (!inputVal) {
 70                 $("#bigFont").hide();
 71                 return false;
 72             }        
 73 
 74             //处理不同类型，格式的逻辑
 75             $("#bigFont").html('<nobr><span></span></nobr>');
 76             //新的显示内容
 77             var bigContent = "";
 78             var count = opts.sepnum == 0 ? opts.seprule.length : Math.ceil(len / opts.sepnum);
 79             if (opts.ipttype != 0) {
 80                 //身份证 手机号  银行卡
 81                 for (var i = 0; i < count; i++) {
 82                     bigContent += (i == 0 ? "" : opts.separator) + inputVal.substr(SumSeqRule(i), opts.seprule[i]);
 83                 }
 84             } else {
 85                 for (var i = 0; i < count; i++) {
 86                     bigContent += (i == 0 ? "" : opts.separator) + inputVal.substr(i * opts.sepnum, opts.sepnum);
 87                 }
 88             }
 89             $("#bigFont").find("span").html(bigContent);
 90             $("#bigFont").show();
 91         }
 92         //控制数字放大镜的显示与销毁
 93         $this.focus(function(event){
 94             $this = $(this);
 95             showBigInfoBox();
 96         });
 97         $this.blur(function(event){
 98             $("#bigFont").html("").hide();
 99         });
100     };
101 })(jQuery);

View Code

　　效果图

　　Github下载地址

https://github.com/zhf1206/FontMark　　

　　欢迎大家一起交流分享、讨论学习，将这个插件完善的更加强大，让我们齐手并进，走得更远。

posted on 2015-07-20 23:19 ZEKELOVE 阅读(1382) 评论(0) 编辑收藏举报