`
天梯梦
  • 浏览: 13731568 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

jquery maskedinput 插件 Masked Input Plugin

阅读更多

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");
});
 

 

 

具体代码见附件:

 

 

 

 

 

 

分享到:
评论

相关推荐

    jQuery输入格式的插件Masked Input Plugin

    《jQuery输入格式插件Masked Input Plugin深度解析》 在Web开发中,用户界面的交互性和数据输入的规范性是提升用户体验的关键因素。jQuery Masked Input Plugin是一款强大的JavaScript库,它能够帮助开发者轻松地...

    jquery插件maskedinput实现掩码文本输入框(masked input效果).zip

    本资源"jquery插件maskedinput实现掩码文本输入框(masked input效果).zip"主要关注的是jQuery的一个扩展插件——jQuery Masked Input Plugin,它允许用户按照特定格式输入数据,例如电话号码、日期或信用卡号,从而...

    前端项目-jquery.maskedinput.zip

    【前端项目-jquery.maskedinput.zip】是一个包含前端开发中常用的jQuery插件——jQuery Masked Input Plugin的资源压缩包。这个插件主要用于在HTML表单中实现输入字段的格式化,帮助用户按照预设的模式进行输入,...

    掩码文本输入框.zip

    jQuery Masked Input Plugin就是基于jQuery库的一个插件,它提供了一种简单的方法来实现掩码功能。jQuery的广泛使用使得这款插件在各种项目中都能轻松集成。 使用jQuery Masked Input Plugin的步骤大致如下: 1. *...

    240多个jQuery UI插件

    - **jQuery datepicker plugin**: 独立的日期选取器插件。 - **jQuery Time Picker**: 提供时间选择功能。 - **Time Picker**: 通用的时间选取器。 - **Click Pick**: 通过点击选择时间。 - **TimePicker**: ...

    jQuery表单插件

    jQuery Form Plugin是一个著名的插件,允许开发者轻松地与服务器进行异步通信(AJAX)处理表单提交。它支持多种提交方式,如POST、GET,还支持XMLHttpRequest Level 2的FormData对象,便于上传文件。此外,该插件...

    jQuery插件教程(搜罗了全部插件).pdf

    6. 其他实用插件:如jQuery Masked Input用于输入格式限制,TypeWatch Plugin用于检测输入框内容变化,jTagging用于标签输入,jQuery Checkbox (checkboxes with images)用于自定义样式的复选框等,这些插件丰富了...

    240多个jQuery插件.doc

    - **Farbtastic jQuery Color Picker Plugin**: 颜色选择器插件。 - **ColorPicker by intelliance.fr**: 颜色选择器插件。 #### 6. 投票插件 - **jQuery Star Rating Plugin**: 星级评分插件。 - **jQuery Star ...

    功能强大的jquery插件

    Masked Input Plugin是一款用于格式化输入字段的jQuery插件,它能够自动按照预设的格式填充文本框,如电话号码、日期等。这不仅规范了用户输入的数据格式,还减少了输入错误的可能性,提高了数据的准确性和一致性。 ...

    上千个Jquery常用插件

    - Masked Input Plugin:为输入框添加掩码,常用于电话号码、日期等格式化输入。 10. **图片裁剪插件**: - Cropper.js:一款轻量级的图片裁剪库,支持响应式和触控设备。 以上只是其中的一小部分,实际上这个...

    50个最好的JQuery插件大全

    10. **表单增强插件**:如Masked Input或Select2,为输入框添加格式化功能,或改善下拉列表的用户体验。 11. **数据可视化插件**:如jqPlot或Chart.js,用于创建图表,展示数据统计和分析结果。 12. **滚动特效...

    240多个jQuery插件

    5. Masked Input:设置输入格式。 6. TypeWatch Plugin:监控输入速度。 7. Text limiter for form fields:限制输入字符数。 8. Ajax Username Check with jQuery:实时检查用户名可用性。 **表单选取框插件**: 1...

    jQuery插件教程(搜罗了全部插件).docx

    - Masked Input:格式化输入字段,如电话号码、信用卡号等。 - TypeWatch Plugin:监控输入,根据输入内容触发验证。 3. **表单选择框类插件**: - jQuery Combobox:将下拉框转换为可搜索的组合框。 - jQuery ...

    Bootstrap ACE后台管理界面模板(扁平化)

    jQuery Masked Input 1.3.1 jQuery Input Limiter 1.3.1 jQuery AutoSize 1.17.7 Bootstrap Colorpicker Bootstrap Datepicker Bootstrap Timepicker v0.2.3 Bootstrap DateRange Picker 1.2 Bootbox.js ...

    ACE Admin官方文档(最新)

    jQuery Masked Input 1.3.1 jQuery Input Limiter 1.3.1 jQuery AutoSize 1.17.7 Bootstrap Colorpicker Bootstrap Datepicker Bootstrap Timepicker v0.2.3 Bootstrap DateRange Picker 1.2 Bootbox.js ...

    Jquery插件大全

    - **masked input plugin**:为输入框设置格式化规则,如电话号码、日期等。 #### 3. **图片和内容展示插件** - **Lightbox**:弹出式图片预览,常用于摄影网站。 - **Bootstrap Carousel**:实现轮播图效果,常见...

    jquery插件表

    - **jQuery Autocomplete Plugin**:另外一种实现自动完成的插件。 以上是jQuery插件的一些典型示例,它们覆盖了文件上传、表单验证、选择框处理、表单基础、时间日期选择以及搜索和评级等功能。这些插件极大地扩展...

    jquery遮罩

    除了BlockUI,还有其他jQuery遮罩插件可供选择,如`jQuery Masked Input Plugin`,主要用于输入框的格式化,不适用于全局遮罩,或者`jQuery UI Dialog`,可以创建弹出对话框并带有遮罩效果。 ### 七、总结 jQuery...

Global site tag (gtag.js) - Google Analytics