IMask input component and action for Svelte 3. demo
Install with npm or yarn:
npm install --save svelte-imask
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>
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
)MIT © PaulMaly