jquery maskedinput 插件 Masked Input Plugin

最新推荐文章于 2025-01-14 09:53:21 发布

原创最新推荐文章于 2025-01-14 09:53:21 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #Chrome #Safari #Firefox #ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

这是一个基于jQuery的输入框格式化插件，允许用户更方便地输入固定宽度的数据，如日期、电话号码等。该插件已在多种浏览器中进行了测试，并支持自定义掩码符号及完成回调。

from：http://digitalbush.com/projects/masked-input-plugin/

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:

a - Represents an alpha character (A-Z,a-z)
9 - Represents a numeric character (0-9)
* - Represents an alphanumeric character (A-Z,a-z,0-9)

First, include the jQuery and masked input javascript files.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Next, call the mask function for those items you wish to have masked.

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Optionally, if you are not satisfied with the underscore ('_') character as a placeholder, you may pass an optional argument to the maskedinput method.

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method.

jQuery(function($){
   $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
});

You can now supply your own mask definitions.

jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

具体代码见附件：