I was able to implement the vanilla JavaScript version:
var maskedInputController = vanillaTextMask.maskInput({
inputElement: document.querySelector('.myInput'),
mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
});<input placeholder="__/__/____" class="myInput"></input>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff899e919693939ed28b9a878bd2929e8c94bfcad1ced1ce">[email protected]</a>/dist/vanillaTextMask.min.js"></script>Now I'm struggling to figure out how to implement the Vue version. It's giving me an error saying it does not provide an export named 'default'.
Check out the source code on Github here: https://github.com/text-mask/text-mask
For Vue specific instructions, visit this link: https://github.com/text-mask/text-mask/tree/master/vue
new Vue({
el: '#app',
components: {
MaskedInput
},
data() {
return {
phone: '',
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Phone Number</label>
<masked-input type="text" name="phone" class="form-control" v-model="phone" :mask="['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]" :guide="false" placeholderChar="#">
</masked-input>
</div>
<script type="module">
import MaskedInput from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="057370602871607d71286864766e45332b342b37">[email protected]</a>/dist/vueTextMask.min.js';
</script>