mirrors/maska
2
0
Fork 0
mirror of https://github.com/tenrok/maska.git synced 2026-06-08 17:22:27 +03:00
Code Activity

Updated docs and readme

Browse Source 
- add autocomplete attributes and 'tel' type
This commit is contained in:
Alexander Shabunevich
2019-09-27 22:12:19 +03:00
parent bd2d5e0075
commit 80b25a0ce7
2 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+14 -1
View File
@@ -12,6 +12,12 @@ Simple zero-dependency input mask for Vue.js and vanilla JS. [Demo and examples]
npm install maska
To load latest version from CDN you can use:
``` html
<script src="https://cdn.jsdelivr.net/npm/maska/dist/maska.js"></script>
```
## Usage with Vue.js
If you load Vue.js via `<script>` then just add `v-maska` directive to your input:
@@ -26,7 +32,14 @@ You can add custom tokens by passing in object instead of string to directive:
<input v-maska="{ mask: 'Z*', tokens: { 'Z': { pattern: /[а-яА-Я]/ }}}">
```
If you use SFC then import `directive` component from library:
With bundlers you can add global directive:
``` javascript
import Maska from 'maska'
Vue.use(Maska)
```
or import `maska` directive for local usage in component:
``` html
<template>
docs/index.htm
+11 -7
View File
@@ -23,16 +23,16 @@
<div class="box">
<form id="vue-form">
<div class="field">
<label class="label">Phone with code</label>
<label class="label">Phone with code: {{ phone }}</label>
<div class="control">
<input v-maska="'+1 (###) ###-##-##'" value="12345678901" class="input">
<input v-maska="'+1 (###) ###-##-##'" class="input" type="tel" autocomplete="tel" v-model="phone">
</div>
<p class="help is-family-code">v-maska="'+1 (###) ###-##-##'"</p>
</div>
<div class="field">
<label class="label">Hex color (custom tokens)</label>
<label class="label">Hex color (custom tokens): {{ color }}</label>
<div class="control">
<input v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}" class="input">
<input v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}" class="input" v-model="color">
</div>
<p class="help is-family-code">v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}"</p>
</div>
@@ -47,7 +47,7 @@
<div class="field">
<label class="label">Phone with code</label>
<div class="control">
<input data-mask="+1 (###) ###-####" class="masked input">
<input data-mask="+1 (###) ###-####" class="masked input" type="tel" autocomplete="tel">
</div>
<p class="help is-family-code">data-mask="+1 (###) ###-####"</p>
</div>
@@ -96,12 +96,16 @@
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maska/dist/maska.js"></script>
<script>
// vue
new Vue({
el: '#vue-form'
el: '#vue-form',
data: {
phone: '19992345678',
color: null
}
});
// vanilla default