jQuery掩码文本输入框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery掩码文本输入框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery掩码文本输入框特效</title>
<script src="../lib/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $.mask.definitions['~'] = "[+-]";
        $("#date").mask("99/99/9999",{completed:function(){alert("completed!");}});
        $("#phone").mask("(999) 999-9999");
        $("#phoneExt").mask("(999) 999-9999? x99999");
        $("#iphone").mask("+33 999 999 999");
        $("#tin").mask("99-9999999");
        $("#ssn").mask("999-99-9999");
        $("#product").mask("a*-999-a999", { placeholder: " " });
        $("#eyescript").mask("~9.99 ~9.99 999");
        $("#po").mask("PO: aaa-999-***");
		$("#pct").mask("99%");
        $("input").blur(function() {
            $("#info").html("Unmasked value: " + $(this).mask());
        }).dblclick(function() {
            $(this).unmask();
        });
    });
	
</script>
</head>
<body>
<table>
		<tr><td>Date</td><td><input id="date" value="1231" type="text" tabindex="1" /></td><td>99/99/9999</td></tr>
		<tr><td>Phone</td><td><input id="phone" type="text" tabindex="2"/></td><td>(999) 999-9999</td></tr>
		<tr><td>Phone + Ext</td><td><input id="phoneExt" type="text" tabindex="2"/></td><td>(999) 999-9999? x99999</td></tr>
		<tr><td>Int'l Phone</td><td><input id="iphone" type="text" tabindex="2"/></td><td>+44 (999) 999-9999</td></tr>
		<tr><td>Tax ID</td><td><input id="tin" type="text" tabindex="3"/></td><td>99-9999999</td></tr>
		<tr><td>SSN</td><td><input id="ssn" type="text" tabindex="4"/></td><td>999-99-9999</td></tr>
		<tr><td>Product Key</td><td><input id="product" type="text" tabindex="5"/></td><td>a*-999-a999</td></tr>
		<tr><td>Eye Script</td><td><input id="eyescript" type="text" tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
		<tr><td>Purchase Order</td><td><input id="po" type="text" tabindex="6"/></td><td>aaa-999-***</td></tr>
		<tr><td>Percent</td><td><input id="pct" type="text" tabindex="6"/></td><td>99%</td></tr>
</table>
</body>
</html>

JS代码(Escape.Spec.js):

feature("Escape Key",function(){
	story('User presses escape key after typing in some changes',function(){
	scenario('mask is applied with an existing value',function(){
	given("an input an existing value '6'",function(){
	input.val('6');
}
);
	given("a mask definition of '9'",function(){
	input.mask('9').focus();
}
);
	waits(1);
	when("user types something different then hits escape key",function(){
	input.mashKeys(function(keys){
	keys.type('1',keys.esc)}
);
}
);
	then("value is return to previous value",function(){
	expect(input).toHaveValue('6');
}
);
}
);
}
);
}
);

JS代码(jquery.maskedinput.js):

/*Masked Input plugin for jQueryCopyright (c) 2007-2010 Josh Bush (digitalbush.com)Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)Version:1.2.3*/
(function($){
	var pasteEventName = ($.browser.msie ? 'paste':'input') + ".mask";
	var iPhone = (window.orientation != undefined);
	$.mask ={
	//Predefined character definitionsdefinitions:{
	'9':"[0-9]",'a':"[A-Za-z]",'*':"[A-Za-z0-9]"}
,dataName:"rawMaskFn"}
;
	$.fn.extend({
	//Helper Function for Caret positioningcaret:function(begin,end){
	if (this.length == 0) return;
	if (typeof begin == 'number'){
	end = (typeof end == 'number') ? end:begin;
	return this.each(function(){
	if (this.setSelectionRange){
	this.setSelectionRange(begin,end);
}
else if (this.createTextRange){
	var range = this.createTextRange();
	range.collapse(true);
	range.moveEnd('character',end);
	range.moveStart('character',begin);
	range.select();
}
}
);
}
else{
	if (this[0].setSelectionRange){
	begin = this[0].selectionStart;
	end = this[0].selectionEnd;
}
else if (document.selection && document.selection.createRange){
	var range = document.selection.createRange();
	begin = 0 - range.duplicate().moveStart('character',-100000);
	end = begin + range.text.length;
}
return{
	begin:begin,end:end}
;
}
}
,unmask:function(){
	return this.trigger("unmask");
}
,mask:function(mask,settings){
	if (!mask && this.length > 0){
	var input = $(this[0]);
	return input.data($.mask.dataName)();
}
settings = $.extend({
	placeholder:"_",completed:null}
,settings);
	var defs = $.mask.definitions;
	var tests = [];
	var partialPosition = mask.length;
	var firstNonMaskPos = null;
	var len = mask.length;
	$.each(mask.split(""),function(i,c){
	if (c == '?'){
	len--;
	partialPosition = i;
}
else if (defs[c]){
	tests.push(new RegExp(defs[c]));
	if(firstNonMaskPos==null)firstNonMaskPos = tests.length - 1;
}
else{
	tests.push(null);
}
}
);
	return this.trigger("unmask").each(function(){
	var input = $(this);
	var buffer = $.map(mask.split(""),function(c,i){
	if (c != '?') return defs[c] ? settings.placeholder:c}
);
	var focusText = input.val();
	function seekNext(pos){
	while (++pos <= len && !tests[pos]);
	return pos;
}
;
	function seekPrev(pos){
	while (--pos >= 0 && !tests[pos]);
	return pos;
}
;
	function shiftL(begin,end){
	if(begin<0) return;
	for (var i = begin,j = seekNext(end);
	i < len;
	i++){
	if (tests[i]){
	if (j < len && tests[i].test(buffer[j])){
	buffer[i] = buffer[j];
	buffer[j] = settings.placeholder;
}
elsebreak;
	j = seekNext(j);
}
}
writeBuffer();
	input.caret(Math.max(firstNonMaskPos,begin));
}
;
	function shiftR(pos){
	for (var i = pos,c = settings.placeholder;
	i < len;
	i++){
	if (tests[i]){
	var j = seekNext(i);
	var t = buffer[i];
	buffer[i] = c;
	if (j < len && tests[j].test(t))c = t;
	elsebreak;
}
}
}
;
	function keydownEvent(e){
	var k=e.which;
	//backspace,delete,and escape get special treatmentif(k == 8 || k == 46 || (iPhone && k == 127)){
	var pos = input.caret(),begin = pos.begin,end = pos.end;
	if(end-begin==0){
	begin=k!=46?seekPrev(begin):(end=seekNext(begin-1));
	end=k==46?seekNext(end):end;
}
clearBuffer(begin,end);
	shiftL(begin,end-1);
	return false;
}
else if (k == 27){
	//escapeinput.val(focusText);
	input.caret(0,checkVal());
	return false;
}
}
;
	function keypressEvent(e){
	var k = e.which,pos = input.caret();
	if (e.ctrlKey || e.altKey || e.metaKey || k<32){
	//Ignorereturn true;
}
else if (k){
	if(pos.end-pos.begin!=0){
	clearBuffer(pos.begin,pos.end);
	shiftL(pos.begin,pos.end-1);
}
var p = seekNext(pos.begin - 1);
	if (p < len){
	var c = String.fromCharCode(k);
	if (tests[p].test(c)){
	shiftR(p);
	buffer[p] = c;
	writeBuffer();
	var next = seekNext(p);
	input.caret(next);
	if (settings.completed && next >= len)settings.completed.call(input);
}
}
return false;
}
}
;
	function clearBuffer(start,end){
	for (var i = start;
	i < end && i < len;
	i++){
	if (tests[i])buffer[i] = settings.placeholder;
}
}
;
	function writeBuffer(){
	return input.val(buffer.join('')).val();
}
;
	function checkVal(allow){
	//try to place characters where they belongvar test = input.val();
	var lastMatch = -1;
	for (var i = 0,pos = 0;
	i < len;
	i++){
	if (tests[i]){
	buffer[i] = settings.placeholder;
	while (pos++ < test.length){
	var c = test.charAt(pos - 1);
	if (tests[i].test(c)){
	buffer[i] = c;
	lastMatch = i;
	break;
}
}
if (pos > test.length)break;
}
else if (buffer[i] == test.charAt(pos) && i!=partialPosition){
	pos++;
	lastMatch = i;
}
}
if (!allow && lastMatch + 1 < partialPosition){
	input.val("");
	clearBuffer(0,len);
}
else if (allow || lastMatch + 1 >= partialPosition){
	writeBuffer();
	if (!allow) input.val(input.val().substring(0,lastMatch + 1));
}
return (partialPosition ? i:firstNonMaskPos);
}
;
	input.data($.mask.dataName,function(){
	return $.map(buffer,function(c,i){
	return tests[i]&&c!=settings.placeholder ? c:null;
}
).join('');
}
)if (!input.attr("readonly"))input.one("unmask",function(){
	input.unbind(".mask").removeData($.mask.dataName);
}
).bind("focus.mask",function(){
	focusText = input.val();
	var pos = checkVal();
	writeBuffer();
	var moveCaret=function(){
	if (pos == mask.length)input.caret(0,pos);
	elseinput.caret(pos);
}
;
	($.browser.msie ? moveCaret:function(){
	setTimeout(moveCaret,0)}
)();
}
).bind("blur.mask",function(){
	checkVal();
	if (input.val() != focusText)input.change();
}
).bind("keydown.mask",keydownEvent).bind("keypress.mask",keypressEvent).bind(pasteEventName,function(){
	setTimeout(function(){
	input.caret(checkVal(true));
}
,0);
}
);
	checkVal();
	//Perform initial check for existing values}
);
}
}
);
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)