mirrors/maska
2
0
Fork 0
mirror of https://github.com/tenrok/maska.git synced 2026-06-20 20:00:34 +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 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 ## Usage with Vue.js
If you load Vue.js via `<script>` then just add `v-maska` directive to your input: 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: /[а-яА-Я]/ }}}"> <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 ``` html
<template> <template>
docs/index.htm
+11 -7
View File
@@ -23,16 +23,16 @@
<div class="box"> <div class="box">
<form id="vue-form"> <form id="vue-form">
<div class="field"> <div class="field">
<label class="label">Phone with code</label> <label class="label">Phone with code: {{ phone }}</label>
<div class="control"> <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> </div>
<p class="help is-family-code">v-maska="'+1 (###) ###-##-##'"</p> <p class="help is-family-code">v-maska="'+1 (###) ###-##-##'"</p>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Hex color (custom tokens)</label> <label class="label">Hex color (custom tokens): {{ color }}</label>
<div class="control"> <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> </div>
<p class="help is-family-code">v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}"</p> <p class="help is-family-code">v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}"</p>
</div> </div>
@@ -47,7 +47,7 @@
<div class="field"> <div class="field">
<label class="label">Phone with code</label> <label class="label">Phone with code</label>
<div class="control"> <div class="control">
<input data-mask="+1 (###) ###-####" class="masked input"> <input data-mask="+1 (###) ###-####" class="masked input" type="tel" autocomplete="tel">
</div> </div>
<p class="help is-family-code">data-mask="+1 (###) ###-####"</p> <p class="help is-family-code">data-mask="+1 (###) ###-####"</p>
</div> </div>
@@ -96,12 +96,16 @@
</div> </div>
</section> </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 src="https://cdn.jsdelivr.net/npm/maska/dist/maska.js"></script>
<script> <script>
// vue // vue
new Vue({ new Vue({
el: '#vue-form' el: '#vue-form',
data: {
phone: '19992345678',
color: null
}
}); });
// vanilla default // vanilla default