#jquery.inputmask 3.x
Copyright (c) 2010 - 2014 Robin Herbots
Licensed under the MIT license (http://opensource.org/licenses/mit-license.php)
[![devDependency Status](https://david-dm.org/RobinHerbots/jquery.inputmask/dev-status.svg)](https://david-dm.org/RobinHerbots/jquery.inputmask#info=devDependencies) [![peerDependency Status](https://david-dm.org/RobinHerbots/jquery.inputmask/peer-status.svg)](https://david-dm.org/RobinHerbots/jquery.inputmask#info=peerDependencies)
jquery.inputmask is a jQuery plugin which create an input mask.
An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...
Highlights:
- easy to use
- optional parts anywere in the mask
- possibility to define aliases which hide complexity
- date / datetime masks
- numeric masks
- lots of callbacks
- non-greedy masks
- many features can be enabled/disabled/configured by options
- supports readonly/disabled/dir="rtl" attributes
- support data-inputmask attribute(s)
- alternator-mask support
- regex-mask support
- dynamic-mask support
- preprocessing-mask support
- value formatting / validating without input element
- AMD support
Demo page see http://robinherbots.github.io/jquery.inputmask
[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZNR3EB6JTMMSS)
## Usage:
Include the js-files which you can find in the dist-folder. You have the bundled file which contains the main plugin code and also all extensions (date, numerics, other) or if you prefer to only include some parts, use the separate js-files in the dist/min folder.
If you use a module loader like requireJS, use the js-files in dist/inputmask
The minimum to include is the jquery.inputmask.js
```html
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.inputmask.js" type="text/javascript"></script>
```
Define your masks:
```javascript
$(document).ready(function(){
$(selector).inputmask("99-9999999"); //static mask
$(selector).inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
$(selector).inputmask({"mask": "99-9999999"}); //specifying options only
$(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});
```
or via data-inputmask attribute
```html
<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />
```
```javascript
$(document).ready(function(){
$(":input").inputmask();
});
```
Any option can also be passed through the use of a data attribute. Use data-inputmask-<***the name op the option***>="value"
```html
<input id="example1" data-inputmask-clearmaskonlostfocus="false" />
<input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
```
```javascript
$(document).ready(function(){
$("#example1").inputmask("99-9999999");
$("#example2").inputmask("Regex");
});
```
#### Default masking definitions
- 9 : numeric
- a : alphabetical
- * : alphanumeric
There are more definitions defined within the extensions.
You can find info within the js-files or by further exploring the options.
## Masking types
### Static masks
These are the very basic of masking. The mask is defined and will not change during the input.
```javascript
$(document).ready(function(){
$(selector).inputmask("aa-9999"); //static mask
$(selector).inputmask({mask: "aa-9999"}); //static mask
});
```
### Optional masks
It is possible to define some parts in the mask as optional. This is done by using [ ].
Example:
```javascript
$('#test').inputmask('(99) 9999[9]-9999');
```
This mask wil allow input like (99) 99999-9999 or (99) 9999-9999.
Input => 12123451234 mask => (12) 12345-1234 (trigger complete)
Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)
Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete)
#### skipOptionalPartCharacter
As an extra there is another configurable character which is used to skip an optional part in the mask.
```javascript
skipOptionalPartCharacter: " ",
```
Input => 121234 1234 mask => (12) 1234-1234 (trigger complete)
When `clearMaskOnLostFocus: true` is set in the options (default), the mask will clear out the optional part when it is not filled in and this only in case the optional part is at the end of the mask.
For example, given:
```javascript
$('#test').inputmask('999[-AAA]');
```
While the field has focus and is blank, users will see the full mask `___-___`.
When the required part of the mask is filled and the field loses focus, the user will see `123`.
When both the required and optional parts of the mask are filled out and the field loses focus, the user will see `123-ABC`.
#### Optional masks with greedy false
When defining an optional mask together with the greedy: false option, the inputmask will show the smallest possible mask as input first.
```javascript
$(selector).inputmask({ mask: "99999[-9999]", greedy: false });
```
The initial mask shown will be "_____" instead of "_____-____".
### Dynamic masks
Dynamic masks can change during the input. To define a dynamic part use { }.
{n} => n repeats
{n,m} => from n to m repeats
Also {+} and {*} is allowed. + start from 1 and * start from 0.
```javascript
$(document).ready(function(){
$(selector).inputmask("aa-9{4}"); //static mask with dynamic syntax
$(selector).inputmask("aa-9{1,4}"); //dynamic mask ~ the 9 def can be occur 1 to 4 times
//email mask
$(selector).inputmask({
mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
greedy: false,
onBeforePaste: function (pastedValue, opts) {
pastedValue = pastedValue.toLowerCase();
return pastedValue.replace("mailto:", "");
},
definitions: {
'*': {
validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
cardinality: 1,
casing: "lower"
}
}
});
```
### Alternator masks
The alternator syntax is like an **OR** statement. The mask can be one of the 2 choices specified in the alternator.
To define an alternator use the |.
ex: "a|9" => a or 9
"(aaa)|(999)" => aaa or 999
Also make sure to read about the keepStatic option.
```javascript
$("selector").inputmask("(99.9)|(X)", {
definitions: {
"X": {
validator: "[xX]",
cardinality: 1,
casing: "upper"
}
}
});
```
or
```javascript
$("selector").inputmask({
mask: ["99.9", "X"],
definitions: {
"X": {
validator: "[xX]",
cardinality: 1,
casing: "upper"
}
}
});
```
### Preprocessing masks
You can define the mask as a function which can allow to preprocess the resulting mask. Example sorting for multiple masks or retrieving mask definitions dynamically through ajax.
The preprocessing fn should return a valid mask definition.
```javascript
$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});
```
## Define custom definitions
You can define your own definitions to use in your mask.
Start by choosing a masksymbol.
##### validator(chrs, maskset, pos, strict, opts)
Next define your validator. The validator can be a regular expression or a function.
The return value of a validator can be true, false or a command object.
###### Options of the command object
没有合适的资源?快使用搜索试试~ 我知道了~
以流程应用开发平台为基础,松耦合各个模块组合,包括组织架构流程引擎门户组件流程设计器等,拥有快速扩展各功能组件和业务实例的
共2000个文件
java:905个
js:858个
html:91个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 189 浏览量
2024-01-22
14:54:28
上传
评论
收藏 174.73MB ZIP 举报
温馨提示
osbpm企业应用开发平台已加入openEA定向开源计划,平台由广州市联科软件股份有限公司自主研发,严格遵照开源协议Mozilla Public License(MPL) 2.0开放源代码。为保证质量,减少企业应用风险,在初期实施定向开源策略,只有加入openEA定向开源计划的企业或个人才能免费使用开源平台。 osbpm以流程应用开发平台为基础,松耦合各个模块组合,包括组织架构、流程引擎、门户组件、移动端组件、表单设计器、流程设计器等,拥有快速扩展各功能组件和业务实例的能力。
资源推荐
资源详情
资源评论
收起资源包目录
以流程应用开发平台为基础,松耦合各个模块组合,包括组织架构流程引擎门户组件流程设计器等,拥有快速扩展各功能组件和业务实例的 (2000个子文件)
ext-all-wf.css 76KB
ext-all.css 76KB
umeditor.css 18KB
stylesheet.css 13KB
xtheme-gray.css 9KB
grid.css 6KB
basic-dialog.css 6KB
vml.css 4KB
svg.css 3KB
panel.css 3KB
canvasSignature.css 935B
iframe.css 565B
0146d8c00d1150498008dd30d6c99b653cf2.doc 32KB
正文模板示例.doc 29KB
default.doc 27KB
f6bb0ed706ac6040210abcd09d4078b87bb6.doc 23KB
红头文件示例.docx 13KB
Rdb.html 121KB
Document.html 74KB
BeanCtx.html 68KB
index-7.html 68KB
Tools.html 59KB
LinkeyUser.html 56KB
Document.html 55KB
ProcessUtil.html 41KB
Documents.html 32KB
index-16.html 27KB
Login.html 17KB
InsNode.html 15KB
RestAction.html 14KB
RestUtil.html 14KB
index-15.html 14KB
index-9.html 14KB
index-4.html 13KB
index-3.html 12KB
Action.html 12KB
MessageUtil.html 12KB
package-use.html 11KB
index-1.html 11KB
XSSFilter.html 10KB
index-5.html 9KB
index-14.html 8KB
help-doc.html 8KB
index-10.html 8KB
index-17.html 7KB
index-8.html 7KB
index-6.html 7KB
index-11.html 7KB
index-18.html 6KB
index-2.html 6KB
LinkeyUser.html 6KB
index-19.html 6KB
index-20.html 6KB
index-12.html 6KB
serialized-form.html 6KB
overview-tree.html 5KB
package-summary.html 5KB
package-use.html 5KB
index-13.html 5KB
package-use.html 5KB
package-use.html 5KB
package-summary.html 5KB
overview-summary.html 5KB
package-summary.html 5KB
package-summary.html 5KB
package-summary.html 5KB
package-tree.html 5KB
package-summary.html 5KB
package-summary.html 5KB
package-tree.html 4KB
package-tree.html 4KB
package-tree.html 4KB
package-tree.html 4KB
package-summary.html 4KB
package-tree.html 4KB
package-tree.html 4KB
MessageUtil.html 4KB
BeanCtx.html 4KB
ProcessUtil.html 4KB
Documents.html 4KB
RestUtil.html 4KB
RestAction.html 4KB
XSSFilter.html 4KB
Tools.html 4KB
Action.html 4KB
Rdb.html 4KB
Login.html 4KB
InsNode.html 4KB
package-tree.html 4KB
package-use.html 4KB
package-use.html 4KB
package-use.html 4KB
package-use.html 4KB
constant-values.html 4KB
deprecated-list.html 4KB
editor.html 3KB
index.html 3KB
allclasses-frame.html 1KB
overview-frame.html 1KB
allclasses-noframe.html 1KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
Java程序员-张凯
- 粉丝: 1w+
- 资源: 6749
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功