返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: html教程 >

maskedInput插件屏蔽输入框

2020-05-07 文章标签: 插件 浏览次数:

我们讲解下使用maskedInput插件,maskedInput屏蔽输入框我们可以轻松指定想要得到的日期格式和手机格式等等

HTML5教程

今天介绍使用maskedInput插件,使用该插件我们可以轻松自定义日期格式和电话格式,效果如下

11.gif

效果如下

maskedInput

demo1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maskedInput</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function(){
    $('#date').mask('99/99/9999');
    $('#phone').mask('(999) 999-9999');
})
</script>
<style type="text/css">
label { display:block; margin:4px; }
</style>
</head>
<body>
<h1>maskedInput屏蔽输入框</h1>
<form id="form1" action="" class="p1">
    <label>日期:
        <input id="date" type="text" tabindex="1" />
        99/99/9999</label>
    <label>电话:
        <input id="phone" type="text" tabindex="3" />
        (999) 999-9999</label>
</form>
</div>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maskedInput</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function(){
      $.mask.definitions['~']='[+-]';
      $('#date').mask('99/99/9999');
      $('#phone').mask('(999) 999-9999');
      $('#phoneext').mask("(999) 999-9999? x99999");
      $("#tin").mask("99-9999999");
      $("#ssn").mask("999-99-9999");
      $("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
      $("#eyescript").mask("~9.99 ~9.99 999");
})
</script>
<style type="text/css"></style>
</head>
<body>
<h1>maskedInput屏蔽输入框</h1>
<form id="form1" action="">
    <label>Date
        <input id="date" type="text" tabindex="1" />
        99/99/9999</label><br><br>
    <label>Phone
        <input id="phone" type="text" tabindex="3" />
        (999) 999-9999</label><br><br>
    <label>Phone + Ext
        <input id="phoneext" type="text" tabindex="4" />
        (999) 999-9999? x99999</label><br><br>
    <label>Tax ID
        <input id="tin" type="text" tabindex="5" />
        99-9999999</label><br><br>
    <label>SSN
        <input id="ssn" type="text" tabindex="6" />
        999-99-9999</label><br><br>
    <label>Product Key
        <input id="product" type="text" tabindex="7" />
        a*-999-a999</label><br><br>
    <label>Eye Script
        <input id="eyescript" type="text" tabindex="8" />
        ~9.99 ~9.99 999</label>
</form>
</div>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maskedInput</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function(){
    $('#date').mask('99/99/9999');
    $('#phone').mask('(999) 999-9999', {
placeholder:"?"
});
})
</script>
<style type="text/css">
label { display:block; margin:4px; }
</style>
</head>
<body>
<h1>maskedInput屏蔽输入框</h1>
<form id="form1" action="" class="p1">
    <label>日期:
        <input id="date" type="text" tabindex="1" />
        99/99/9999</label>
    <label>电话:
        <input id="phone" type="text" tabindex="3" />
        (999) 999-9999</label>
</form>
</div>
</body>
</html>

demo4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maskedInput</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function(){
$.mask.definitions['0']='[0]';
$.mask.definitions['1']='[01]';
    $('#date').mask('19/99/9999');
    $('#phone').mask('(099) 999-9999');
})
</script>
<style type="text/css">
label { display:block; margin:4px; }
</style>
</head>
<body>
<h1>maskedInput屏蔽输入框</h1>
<form id="form1" action="" class="p1">
    <label>日期:
        <input id="date" type="text" tabindex="1" />
        [01]9/99/9999</label>
    <label>电话:
        <input id="phone" type="text" tabindex="3" />
        (099) 999-9999</label>
</form>
</div>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。