|
|
@@ -33,43 +33,109 @@ Demo page see [http://robinherbots.github.io/Inputmask](http://robinherbots.gith
|
|
|
|
|
|
[](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.
|
|
|
+## Setup
|
|
|
+### dependencyLibs
|
|
|
+Inputmask can run against different javascript libraries.
|
|
|
+You can choose between:
|
|
|
+- inputmask.dependencyLib (vanilla)
|
|
|
+- inputmask.dependencyLib.jquery
|
|
|
+- inputmask.dependencyLib.jqlite
|
|
|
+- .... (others are welcome)
|
|
|
|
|
|
-via Inputmask class
|
|
|
+### Classic web with <script\> tag
|
|
|
+Include the js-files which you can find in the `dist` folder.
|
|
|
|
|
|
+If you want to include the Inputmask and all extensions. (with jQuery as dependencylib)
|
|
|
```html
|
|
|
<script src="jquery.js"></script>
|
|
|
-<script src="inputmask.js"></script>
|
|
|
-<script src="inputmask.???.Extensions.js"></script>
|
|
|
+<script src="dist/jquery.inputmask.bundle.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone-be.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone-ru.js"></script>
|
|
|
+```
|
|
|
+For individual extensions. (with jQuery as dependencylib)
|
|
|
+```html
|
|
|
+<script src="jquery.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.regex.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.numeric.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.date.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.phone.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/jquery.inputmask.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone-be.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone-ru.js"></script>
|
|
|
+```
|
|
|
+
|
|
|
+For individual extensions. (with vanilla dependencylib)
|
|
|
+```html
|
|
|
+<script src="dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.regex.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.numeric.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.date.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/inputmask.phone.extensions.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone-be.js"></script>
|
|
|
+<script src="dist/inputmask/phone-codes/phone-ru.js"></script>
|
|
|
+```
|
|
|
+
|
|
|
+If you like to automatically bind the inputmask to the inputs marked with the data-inputmask- ... attributes you may also want to include the inputmask.binding.js
|
|
|
+
|
|
|
+```html
|
|
|
+...
|
|
|
+<script src="dist/inputmask/bindings/inputmask.binding.js"></script>
|
|
|
+...
|
|
|
+```
|
|
|
+
|
|
|
+###webpack
|
|
|
+
|
|
|
+####Install the package
|
|
|
+```
|
|
|
+npm install inputmask --save-dev
|
|
|
+```
|
|
|
+
|
|
|
+####In your modules
|
|
|
+If you want to include the Inputmask and all extensions.
|
|
|
```
|
|
|
+var Inputmask = require('inputmask');
|
|
|
+
|
|
|
+//es6
|
|
|
+import Inputmask from "inputmask";
|
|
|
+```
|
|
|
+
|
|
|
+For individual extensions.
|
|
|
+Every extension exports the Inputmask, so you only need to import the extensions.
|
|
|
+See example.
|
|
|
+```
|
|
|
+require("inputmask/dist/inputmask/inputmask.numeric.extensions");
|
|
|
+var Inputmask = require("inputmask/dist/inputmask/inputmask.date.extensions");
|
|
|
+
|
|
|
+//es6
|
|
|
+import "inputmask/dist/inputmask/inputmask.numeric.extensions";
|
|
|
+import Inputmask from "inputmask/dist/inputmask/inputmask.date.extensions";
|
|
|
+```
|
|
|
+
|
|
|
+## Usage
|
|
|
+
|
|
|
+### via Inputmask class
|
|
|
|
|
|
```javascript
|
|
|
var selector = document.getElementById("selector");
|
|
|
|
|
|
var im = new Inputmask("99-9999999");
|
|
|
im.mask(selector);
|
|
|
-
|
|
|
+
|
|
|
+//or
|
|
|
+
|
|
|
Inputmask({"mask": "(999) 999-9999", .... other options .....}).mask(selector);
|
|
|
Inputmask("9-a{1,3}9{1,3}").mask(selector);
|
|
|
Inputmask("9", { repeat: 10 }).mask(selector);
|
|
|
```
|
|
|
|
|
|
-via jquery plugin
|
|
|
-
|
|
|
-```html
|
|
|
-<script src="jquery.js"></script>
|
|
|
-<script src="inputmask.js"></script>
|
|
|
-<script src="inputmask.???.Extensions.js"></script>
|
|
|
-<script src="jquery.inputmask.js"></script>
|
|
|
-```
|
|
|
-
|
|
|
-or with the bundled version
|
|
|
-
|
|
|
-```html
|
|
|
-<script src="jquery.js"></script>
|
|
|
-<script src="jquery.inputmask.bundle.js"></script>
|
|
|
-```
|
|
|
+###via jquery plugin
|
|
|
|
|
|
```javascript
|
|
|
$(document).ready(function(){
|
|
|
@@ -79,7 +145,7 @@ $(document).ready(function(){
|
|
|
});
|
|
|
```
|
|
|
|
|
|
-via data-inputmask attribute
|
|
|
+###via data-inputmask attribute
|
|
|
|
|
|
```html
|
|
|
<input data-inputmask="'alias': 'date'" />
|
|
|
@@ -95,7 +161,7 @@ $(document).ready(function(){
|
|
|
});
|
|
|
```
|
|
|
|
|
|
-Any option can also be passed through the use of a data attribute. Use data-inputmask-<**_the name of the option_**>="value"
|
|
|
+####Any option can also be passed through the use of a data attribute. Use data-inputmask-<**_the name of the option_**>="value"
|
|
|
|
|
|
```html
|
|
|
<input id="example1" data-inputmask-clearmaskonlostfocus="false" />
|
|
|
@@ -109,35 +175,6 @@ $(document).ready(function(){
|
|
|
});
|
|
|
```
|
|
|
|
|
|
-If you like to automatically bind the inputmask to the inputs marked with the data-inputmask- ... attributes you may also want to include the inputmask.binding.js
|
|
|
-
|
|
|
-```html
|
|
|
-...
|
|
|
-<script src="inputmask.binding.js"></script>
|
|
|
-...
|
|
|
-```
|
|
|
-
|
|
|
-If you use a module loader like requireJS
|
|
|
-
|
|
|
-Have a look at the inputmask.loader.js for usage.
|
|
|
-
|
|
|
-Example config.js
|
|
|
-
|
|
|
-```javascript
|
|
|
-paths: {
|
|
|
- ...
|
|
|
- "inputmask.dependencyLib": "../dist/inputmask/inputmask.dependencyLib",
|
|
|
- "inputmask": "../dist/inputmask/inputmask",
|
|
|
- ...
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-As dependencyLib you can choose between the supported libraries.
|
|
|
-- inputmask.dependencyLib (vanilla)
|
|
|
-- inputmask.dependencyLib.jquery
|
|
|
-- inputmask.dependencyLib.jqlite
|
|
|
-- .... (others are welcome)
|
|
|
-
|
|
|
### Allowed HTML-elements
|
|
|
- `<input type="text">`
|
|
|
- `<input type="tel">`
|