JQuery开发文本框输入放大内容和格式化的插件
【摘要】 JQuery开发文本框输入放大内容和格式化的插件，实现输入手机号，身份证，银行卡放大和格式美化的效果插件。
在之前做的一个项目中，发现用户在输入手机号、身份证或者银行卡等这些重要的安全隐私信息数据的时候，由于屏幕有限、输入内容多而文本框显示的文字不是非常大，不能非常明显的显示给用户，如果用户眼神不太好则很有可能会输入错误，可能会导致严重问题，或者需要用户重复输入。
对于用户来说，往往这些重要数据都需要核对确认好几次，在确保正确无误的时候才敢点击保存，这样总会浪费时间降低效率，对用户的体验效果也不是非常友好，如果我们能在用户输入的同时就把输入的内容在输入框的上面对内容进行放大、颜色突出并且按照不同的符号分隔显示，是不是这样更能便于用户快速的核实数据和输入呢。
于是自己利用业务时间，动手封装了一个JQuery的小插件：
第一步：创建一个样式表 sytle.css
@charset "utf-8";
/*初始化CSS*/
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}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.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);
}
.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');
}
.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;}
.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');}
/*放大显示的内容样式*/
#bigFont{height:45px;position:absolute;background-color:#8AD151;display:none;line-height:45px;font-size:30px;font-weight:bold;padding:0 5px;}
#bigFont span{margin-left:8px;}
#bigFont span:first-child{margin-left:0;}第二步：创建页面 demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>输入文字放大并格式化</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/fontmark.js"></script>
</head>
<style>
form{margin-top:20px;}
input[type='text']{display:inline-block;width:20%;height:30px; line-height:30px;text-indent:10px;}
.group{ display: inline-block;height:60px;line-height:60px;margin:2px 20px;width:100%;font-size:16pt;}
</style>
<body>
<form action="">
<div class="group">银行卡：<input id="txtBank" type="text" /></div>
<div class="group">身份证：<input id="txtIdCard" type="text" /></div>
<div class="group">手机号：<input id="txtPhone" type="text" /></div>
<div class="group">默认值：<input id="txtDefault" type="text" /></div>
</form>
</body>
</html>
<script>
$(function(){
// 不同类型使用
$("#txtBank").fontMark({
ipttype:3
});
$("#txtIdCard").fontMark({
ipttype:1
});
$("#txtPhone").fontMark({
ipttype:2
});
//默认使用
//$("#txtDefault").fontMark();
//设置分隔符
// $("#txtDefault").fontMark({
// separator:'-'
// });
//设置分隔符分隔位数
$("#txtDefault").fontMark({
separator:"-",
sepnum:"3"
});
});
</script>第三步：创建插件脚本文件 fontmark.js
/**
*
* @authors zeke (zhf1206@qq.com)
* @date 2021-09-14 13:10:16
* @version V1.0
*/
(function($) {
$.fn.fontMark = function(options) {
/*
* 说明：数字放大镜随着字数延伸
* ipttype ： 输入类型（0-默认 1-身份证 2-手机号 3-银行卡）
* separator：分隔符（空格 or 横线）
* sepnum： 分隔位数（默认0,1,2,3……）
* seprule： 分隔规则默认（身份证： 3 3 4 4 4 手机号： 3 4 4 银行卡：4 4 4 4）
*/
var defaults = {
ipttype: 0, //输入类型
separator: ' ',//分隔符
sepnum: 0, //分隔位数
seprule: [] //分隔规则数组
};
// Extend our default options with those provided.
var opts = $.extend({}, defaults, options);
// Our plugin implementation code goes here.
$this = $(this);
//定义预展示输入框的坐标
var glassT = $this.offset().top,
glassL = $this.offset().left;
//定义放大显示的Html
var glassStr = '<div id="bigFont"><nobr><span></span></nobr></div>';
$this.after($(glassStr));
$this.keyup(function() {
$this = $(this);
showBigInfoBox();
});
//分隔规则
if (opts.sepnum == 0) {
if (opts.ipttype == 1 && opts.seprule.length == 0) {
opts.seprule = [3, 3, 4, 4, 4];
} else if (opts.ipttype == 2 && opts.seprule.length == 0) {
opts.seprule = [3, 4, 4];
} else if (opts.ipttype == 3 && opts.seprule.length == 0) {
opts.seprule = [4, 4, 4, 4];
} else {
opts.sepnum = 4;
}
}
//求分隔规则数组开始值
function SumSeqRule(idx) {
var starIdx = 0;
for (var i = 0; i < idx; i++) {
starIdx += opts.seprule[i];
}
return starIdx;
}
//生成放大镜
function showBigInfoBox() {
var inputVal = $this.val(),
len = inputVal.length;
$("#bigFont").css({
"top": (glassT - 50) + "px",
"left": glassL + "px"
});
var style = "top:'+(glassT-50)+'px;left:'+glassL+'px;"
if (!inputVal) {
$("#bigFont").hide();
return false;
}
//处理不同类型，格式的逻辑
$("#bigFont").html('<nobr><span></span></nobr>');
//新的显示内容
var bigContent = "";
var count = opts.sepnum == 0 ? opts.seprule.length : Math.ceil(len / opts.sepnum);
if (opts.ipttype != 0) {
//身份证 手机号 银行卡
for (var i = 0; i < count; i++) {
bigContent += (i == 0 ? "" : opts.separator) + inputVal.substr(SumSeqRule(i), opts.seprule[i]);
}
} else {
for (var i = 0; i < count; i++) {
bigContent += (i == 0 ? "" : opts.separator) + inputVal.substr(i * opts.sepnum, opts.sepnum);
}
}
$("#bigFont").find("span").html(bigContent);
$("#bigFont").show();
}
//控制数字放大镜的显示与销毁
$this.focus(function(event){
$this = $(this);
showBigInfoBox();
});
$this.blur(function(event){
$("#bigFont").html("").hide();
});
};
})(jQuery);效果图
文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~
文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）