Skip to content

PaulMaly/svelte-imask

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

svelte-imask

IMask input component and action for Svelte 3. demo

Usage

Install with npm or yarn:

npm install --save svelte-imask

Parameters

Any options of imask can be passed to action as options or MaskedComponent via options prop.

Then import MaskedInput component to your Svelte app. options prop will be passed to imask action. Any other props will be assigned to input element itself.

<label>
  <MaskedInput 
    bind:value={tel} 
    options={options} 
    on:complete={complete} 
    name="phone" 
    type="tel"
  />
</label>
 
<script>
  import { MaskedInput } from 'svelte-imask';

  const options = {
		mask: '+{7}(000)000-00-00'
  };
  
  let tel;

  function complete({ detail: imask }) {
    console.log('completed', imask);
  }
</script>

OR import imask action to get full control.

<label>
  <input 
    use:imask={options} 
    on:accept={accept} 
    on:complete={complete} 
    name="phone" 
    type="tel"
  >
</label>
 
<script>
  import { imask } from 'svelte-imask';

  const options = {
		mask: '+{7}(000)000-00-00'
  };

  function accept({ detail: imask }) {
    console.log('accepted', imask);
  }

  function complete({ detail: imask }) {
    console.log('completed', imask);
  }
</script>

Events

  • accept - event fires on input when the value has changed (imask instance in event.detail)
  • complete - event fires when the value is completely filled (imask instance in event.detail)

License

MIT © PaulMaly

About

IMask input component and action for Svelte 3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published