在最近做的項目中，發現用戶在輸入手機號、身份證或者銀行卡這些重要的數據的時候，文本框顯示的文字不是非常大，也不是非常明顯的顯示給用戶。
往往這些重要數據用戶都需要覈對好幾次，在確保正確無誤的時候纔敢點擊保存，這樣總會浪費一點時間，對用戶的體驗也不是非常友好，如果我們能在用戶輸入框的上面對輸入的內容進行放大、顏色突出並且按照不同的分隔顯示，是不是這樣更能便於用戶快速的核實數據呢。
於是自己利用業務時間就動手封裝了一個小插件：
第一步：創建一個樣式表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;}
第二步：創建事例頁面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>
第三步：創建插件腳本文件fontmark.js
1 /** 2 * 3 * @authors Zeke ([email protected]) 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);
效果圖
Github下載地址
https://github.com/zhf1206/FontMark
歡迎大家一起交流分享、討論學習，將這個插件完善的更加強大，讓我們齊手並進，走得更遠。