一.下载插件
  http://digitalbush.com/projects/masked-input-plugin/
二。属性
a: 表示只能输入大小写字母
9:表示只能输入0-9之间的数字
*：a和9的结合
placeholder:占位符
三。方法
mask(param1,pararm2)：param1:限制输入格式，param2:制定占位符
umask():删除输入格式的限制
四.扩展 方法 
可以根据自己的需求限制输入格式例如:
$.mask.definitions['z']='[123]';表示只能输入123数字
五.例子 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

<script type="text/javascript" src="http://zhyj0303.blog.163.com/blog/../../js/jquery-1.4.2.js"></script>

<script type="text/javascript" src="http://zhyj0303.blog.163.com/blog/../../js/jquery.maskedinput-1.2.2.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
        $("#txtdate").mask("99/99/9999", { placeholder: "|" });
            $("#txtphone").mask("(999) 999-9999");
            $("#txttin").mask("99-9999999");
            $("#txtmax").mask("999/99/9999");
            $("#txtdemo1").mask("**/***/****");
            $("#txtdemo2").mask("aa/aaa/aaa");
            
            //自定义格式
            $.mask.definitions['z'] = '[123]';//Z:表示只能输入123
            $("#txtdemo3").mask("zz/ zzz/ zzzz");
        });
       
    </script>

</head>
<body>
    <input type="text" id="txtdate" /><span style="color: Red">输入格式(99/99/9999)</span><br />
    <input type="text" id="txtphone" /><span style="color: Red">输入格式((999)999-9999)</span><br />
    <input type="text" id="txttin" /><span style="color: Red">输入格式(99-99999999)</span><br />
    <input type="text" id="txtmax" /><span style="color: Red">输入格式(999-99-99999)</span><br />
    <input type="text" id="txtdemo1" /><span style="color: Red">以(**/***/****)形式输入大小写字母和数字</span><br />
    <input type="text" id="txtdemo2" /><span style="color: Red">以(aa/aa/aaa)形式输入大小写字母</span><br />
    <input type="text" id="txtdemo3" /><span style="color: Red">自定义的输入方式(zz/zzz/zzz)</span><br />
</body>
</html>

jQuery的maskedinput插件 设置input掩码的更多相关文章

  1. 漂亮灵活设置的jquery通知提示插件toastr

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

  2. jquery 获取及设置input各种类型的值 (转)

    jQuery操作input值总结 获取选中的值 获取一组radio被选中项的值 var item = $("input[@name=items]:checked").val(); ...

  3. JQuery设置input属性(disabled、enabled)

    document.getElementById("removeButton").disabled = false; //普通Js写法 $("#removeButton&q ...

  4. 关于jQuery的cookies插件2.2.0版设置过期时间的说明

    欢迎转载,转载请注明作者RunningOn jQuery应该是各位用JavaScript做web开发的常用工具了,它有些插件能非常方便地操作cookie. 不过非常让人郁闷的是,网上几乎所有人对于这些 ...

  5. jQuery中使用attribute，prop获取，设置input的checked值【转】

    1.prop方法获取.设置checked属性 当input控件checkbox设置了checked属性时,无论checked=”“或 checked=”checked”,$(obj).prop(“ch ...

  6. jQuery中使用attribute，prop获取，设置input的checked值

    1.prop方法获取.设置checked属性 当input控件checkbox设置了checked属性时,无论checked=”“或 checked=”checked”,$(obj).prop(“ch ...

  7. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  8. 利用jquery的imgAreaSelect插件实现图片裁剪示例

    http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...

  9. 提示用户体验的最佳免费 Jquery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

随机推荐

  1. android: 文件存储

    数据持久化就是指将那些内存中的瞬时数据保存到存储设备中,保证即使在手机或电脑 关机的情况下,这些数据仍然不会丢失.保存在内存中的数据是处于瞬时状态的,而保存在 存储设备中的数据是处于持久状态的,持久化 ...

  2. 如何实现在H5里调起高德地图APP？（上）

    这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前往方式. 场景一.在高德地图上展示Marker点或者POI标记 在一些基于位置分享的应用开发 ...

  3. Linear or non-linear shadow maps?

    Quote: Original post by RobMaddisonI understand that, for aliasing mitigation, it might be beneficia ...

  4. 努力学习 HTML5 （1）—— 初体验

    HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. 最简单的 HTML5 文档 & ...

  5. 【转】使用Cocoapods创建私有podspec

    Cocoapods是非常好用的一个iOS依赖管理工具,使用它可以方便的管理和更新项目中所使用到的第三方库,以及将自己的项目中的公共组件交由它去管理.Cocoapods的介绍及优点本文就不在赘述,我开始 ...

  6. 配置CENTOS YUM更新源

    众所周知,Centos 有个很方便的软件安装工具  yum,但是默认安装完centos,系统里使用的是国外的centos更新源,这就造成了我们使用默认更新源安装或者更新软件时速度很慢的问题. 为了使用 ...

  7. [转]揭秘webdriver实现原理

    转自:http://www.cnblogs.com/timsheng/archive/2012/06/12/2546957.html 通过研究selenium-webdriver的源码,笔者发现其实w ...

  8. JavaScript 调试小技巧

    'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...

  9. A CIRCULAR PROGRESSBAR STYLE USING AN ATTACHED VIEWMODEL

    This blog post describes how to re-template the Silverlight ProgressBar control to render a circular ...

  10. Akismet API 密钥(key)免费获取方法

    Akismet插件是用户使用最广泛的垃圾评论插件,也是wordpress的创始人制作的,同时它也毫无疑问的成为wordpress的默认安装插件,这样的插件可以帮助用户解决垃圾评论的烦恼,而且也不用访客 ...