Input Masking with Vue

Input Masking with Vue @shortdiv

Divya Sasidharan Developer Advocate

0.00

0.01

0.12

1.23

12.34

123.45

1,234.56

123.45

12.34

1.23

0.12

0.01

0.00

$0

$ 1

$ 12

$ 123

$ 1,234

$ 1,234 5

$ 1,234 56

$ 1,234 5

$ 1,234

$ 123

$ 12

$ 1

$0

Why use this pattern? I don’t have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use an input mask. — Chris Coyier

Input Events The Role of Reactivity Reusable component patterns

0.00

Requirements Allow only numbers Add format for dollars and cents

Input Events

Patterns Capturing Key Events 0.00

Patterns Capturing Key Events

Patterns Capturing Key Events 1

Patterns Capturing Key Events 1 oninput

Patterns Capturing Key Events 1 @input

<input type=”text” id=“currency” placeholder=”0.00” /> v-model=”formattedCashMoney”

<template> <input type=”text” id=”currency” v-model=”formattedCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } } } </script>

<template> <input type=”text” id=”currency” v-model=”formattedCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, } </script>

<template> <input type=”text” id=”currency” v-model=”formattedCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @input=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney() { //format cashMoney } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @input=“formatCashMoney” @input=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney() { //format cashMoney } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @input=“formatCashMoney” @input=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { cashMoney: null formattedCashMoney: null } }, methods: { formatCashMoney() { //format cashMoney } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @input=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney() { //format cashMoney } } } </script>

Requirements Allow only numbers Add format for dollars and cents

<template> <input type=”text” id=”currency” :value=”formattedCashMoney” @input=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney() { //format cashMoney } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @input=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney(e) { var key = e.key } } } </script>

<template> <input type=”text” id=”currency” :value=”formattedCashMoney” @input=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney() {{ formatCashMoney(e) var key = e.key if (!/^\d+/g.test(key)) { e.preventDefault() } } } } </script>

Working Demo

keydown > keypress > input > keyup

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @input=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney(e) { var key = e.key if (!/^\d+/g.test(key)) { e.preventDefault() } } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney(e) { var key = e.key if (!/^\d+/g.test(key)) { e.preventDefault() } } } } </script>

Working Demo

Requirements Allow only numbers Add format for dollars and cents

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=”formatCashMoney” /> </template> <script> export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney(e) { var key = e.key if (!/^\d+/g.test(key)) { e.preventDefault() } } } } </script>

<template> <input type=”text” id=”currency” :value=”formattedCashMoney” @keydown=”formatCashMoney” /> </template> <script> import { wearMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney(e) { … } } this.formattedCashMoney = wearMask(e.target.value) } </script>

function wearMask (str) { let num = decimalize(str) num = separateByThousandths(num, “,”) } function decimalize(numstr) { if (numstr.length > 1) { let dp = numstr.substring(numstr.length-2, numstr.length) let denom = numstr.substring(0, numstr.length - 2) if (denom.substring(0,1) === “0”) { denom = denom.substring(1, denom.length) } return ${denom}.${dp} } else { return 0.0${numstr} } } function separateByThousandths(str, delimiter) { return str.replace(/\B(?=(\d{3})+(?!\d))/g, ${delimiter}); }

function wearMask (str) { let num = decimalize(str) num = separateByThousandths(num, “,”) } function decimalize(numstr) decimalize(numstr) {{ if (numstr.length >> 1) 1) {{ let dp = numstr.substring(numstr.length-2, numstr.substring(numstr.length-2, numstr.length) numstr.length) let denom = numstr.substring(0, numstr.substring(0, numstr.length numstr.length — 2) 2) if (denom.substring(0,1) (denom.substring(0,1) === === “0”) “0”) {{ denom = denom.substring(1, denom.substring(1, denom.length) denom.length) } return ${denom}.${dp}${denom}.${dp} } else { return 0.0${numstr}0.0${numstr} } } function separateByThousandths(str, delimiter) { return str.replace(/\B(?=(\d{3})+(?!\d))/g, ${delimiter}); }

function wearMask (str) { let num = decimalize(str) num = separateByThousandths(num, “,”) } function decimalize(numstr) { if (numstr.length > 1) { let dp = numstr.substring(numstr.length-2, numstr.length) let denom = numstr.substring(0, numstr.length - 2) if (denom.substring(0,1) === “0”) { denom = denom.substring(1, denom.length) } return ${denom}.${dp} } else { return 0.0${numstr} } } function separateByThousandths(str, delimiter) { return str.replace(/\B(?=(\d{3})+(?!\d))/g, ${delimiter}); }

thousandths 123456 cents

thousandths 1,234.56 cents

Working Demo

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=”formatCashMoney” /> </template> <script> import { wearMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney() { … } } this.formattedCashMoney = wearMask(e.target.value) } </script>

keydown > keypress > input > keyup

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=”formatCashMoney” /> </template> <script> import { wearMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney(e) { … } } this.formattedCashMoney = wearMask(e.target.value) } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=“formatCashMoney” @keydown=”formatCashMoney” /> </template> <script> import { wearMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { formatCashMoney(e) { … } } this.formattedCashMoney = wearMask(e.target.value) } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=“validateInput” @keydown=”validateInput” @input=“formatInput” @input=”formatInput” /> </template> <script> import { wearMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { validateInput(e) { … } formatInput(e) { this.formattedCashMoney = wearMask(e.target.value) } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=“validateInput” @keydown=”validateInput” @input=“formatInput” @input=”formatInput” /> </template> <script> import { wearMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { validateInput(e) { … } formatInput(e) { this.formattedCashMoney = wearMask(e.target.value) } } }c } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=”validateInput” @input=”formatInput” /> </template> <script> import { wearMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { validateInput(e) { … } formatInput(e) { this.formattedCashMoney = wearMask(e.target.value) } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=“validateInput” @keydown=”validateInput” @input=“formatInput” @input=”formatInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { validateInput(e) { … } formatInput(e) { let unformatted = removeMask(e.target.value) this.formattedCashMoney = wearMask(e.target.value) } } } </script>

function wearMask (str) { let num = decimalize(str) num = separateByThousandths(num, “,”) } function decimalize(numstr) { if (numstr.length > 1) { let dp = numstr.substring(numstr.length-2, numstr.length) let denom = numstr.substring(0, numstr.length - 2) if (denom.substring(0,1) === “0”) { denom = denom.substring(1, denom.length) } return ${denom}.${dp} } else { return 0.0${numstr} } } function separateByThousandths(str, delimiter) { return str.replace(/\B(?=(\d{3})+(?!\d))/g, ${delimiter}); } function removeMask(str) { return numstr.replace(/\D+/g, “”); }

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=”validateInput” @input=”formatInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { validateInput(e) { … } formatInput(e) { let unformatted = removeMask(e.target.value) this.formattedCashMoney = wearMask(e.target.value) } } } </script>

Requirements Allow only numbers Allowformat for delete/backspace Add for dollars and cents

The Role of Reactivity

0.00

Reactivity Methods methods: { onInput() {}, onKeyPress() {}, onKeyDown() {} … }

Reactivity Computed Property computed: { currentMask() { // format // } }

<template> <input type=”text” id=”currency” :value=”formattedCashMoney” @keydown=”validateInput” @input=”formatInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { formattedCashMoney: null } }, methods: { validateInput(e) { … } formatInput(e) { let unformattedVal = removeMask(e.target.value) this.formattedCashMoney = wearMask(unformattedVal) } } } </script>

<template> <input type=”text” id=”currency” :value=”formattedCashMoney” @keydown=”validateInput” @input=”updateInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { unformatted: null } }, methods: { validateInput(e) { … } updateInput(e) { this.unformatted = removeMask(e.target.value) } }, computed: { formattedCashMoney() { return wearMask(this.unformatted) } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=”validateInput” @input=”formatInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { unformatted: null } }, methods: { validateInput(e) { … } updateInput(e) { this.unformatted = removeMask(e.target.value) } }, computed: { formattedCashMoney() { return wearMask(this.unformatted) } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=“validateInput” @input=“formatInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { unformatted: null } }, methods: { validateInput(e) { … } updateInput(e) { this.unformatted = removeMask(e.target.value) } }, computed: { formattedCashMoney() { return wearMask(this.unformatted) } } } </script>

<template> <input type=”text” id=“currency” :value=”formattedCashMoney” @keydown=“validateInput” @input=“updateInput” @input=”updateInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { unformatted: null } }, methods: { validateInput(e) { … } updateInput(e) { this.unformatted = removeMask(e.target.value) } }, computed: { formattedCashMoney: {{ formattedCashMoney() return wearMask(this.unformatted) } } } </script>

Working Demo

Reactivity Computed Property computed: { currentMask() { get(){ … } set(){ … } } }

<template> <input type=”text” id=”currency” :value=”formattedCashMoney” @input=”updateInput” @keydown=”validateInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { unformatted: null } }, methods: { validateInput(e) { … } updateInput(e) { this.unformatted = removeMask(e.target.value) } }, computed: { formattedCashMoney() { return wearMask(this.unformatted) } } } </script>

<template> <input type=”text” id=”currency” v-model=”formattedCashMoney” @keydown=”validateInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { formatted: null } }, methods: { validateInput(e) { … } }, computed: { formattedCashMoney() { get() { … }, set() { … } } } } </script>

<template> <input type=”text” id=”currency” v-model=”formattedCashMoney” @keydown=”validateInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { formatted: null } }, methods: { validateInput(e) { … } }, computed: { formattedCashMoney() { get() { return this.formatted }, set() { … } } } } </script>

<template> <input type=”text” id=”currency” v-model=”formattedCashMoney” @keydown=”validateInput” /> </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, data () { return { formatted: null } }, methods: { validateInput(e) { … } }, computed: { formattedCashMoney() { get() { return this.formatted }, set(newVal) { let val = removeMask(newVal) this.formatted = wearMask(this.unformatted) } } } } </script>

Working Demo

Reusable Components

0.00

(###)-###-####

MM/DD/YYYY

Component Pattern Renderless Components export default { render(h) { return this.$scopedSlots.default({ … }) } }

<v-mask> //some children nodes// </v-mask>

<v-mask v-slot:default=”{ … }” > //some children nodes// </v-mask>

<v-mask v-slot:default=”{ formattedValue, input, keydown }” > <label> <input type=”text” :value=”formattedValue” @input=”input” @keydown=”keydown” /> <label> </v-mask>

<v-mask v-slot:default=“{ v-slot:default=”{ formattedValue, input, keydown }” }” > <label> <input type=”text” :value=“formattedValue” :value=”formattedValue” @input=“input” @input=”input” @keydown=”keydown” @keydown=“keydown” /> <label> </v-mask>

<v-mask v-slot:default=”{ formattedValue, input, keydown }” > <label> <input type=”text” :value=”formattedValue” @input=”input” @keydown=”keydown” /> <label> </v-mask>

<v-mask v-slot:default=“{ v-slot:default=”{ formattedValue, listeners }” }” > <label> <input type=”text” :value=”formattedValue” v-on=”listeners” /> <label> </v-mask>

<v-mask v-slot:default=”{ formattedValue, listeners }” > <label> <input type=”text” :value=”formattedValue” v-on=”listeners” /> <label> </v-mask>

export default { name: “v-mask”, data() { return { formatted: “0.00” }; }, render() { return this.$scopedSlots.default({ formattedValue: this.formatted, listeners: { keydown: e => { … }, input: e => { … } } }) } }

export default { name: “v-mask”, “v-mask”, data() { return { formatted: “0.00” “0.00” }; }, render() { return this.$scopedSlots.default({ formattedValue: this.formatted, listeners: { keydown: e => { … }, input: e => { … } } }) } }

export default { name: “v-mask”, “v-mask”, data() { return { formatted: “0.00” }; }, render() { return this.$scopedSlots.default({ formattedValue: this.formatted, listeners: { keydown: e => { … }, input: e => { … } } }) } }

Component Pattern Directives directives: { mask: { bind(){ … } inserted(){ … } update(){ … } componentUpdated(){ … } unbind(){ … } } }

<template> <input type=”text” id=”currency” v-mask=”’(###)###-####’” > </template> <script> export default { name: “v-dinero”, directives: { mask: { bind() {…} componentUpdated() {…} } }, } </script>

<template> <input type=”text” id=”currency” v-mask=”’(###)###-####’” > </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, directives: { mask: { bind(el, { value }) { const mask = value el.value = wearMask(el.target.value, mask); }, componentUpdated() {…} } }, } </script>

<template> <input type=”text” id=”currency” v-mask=”’(###)###-####’” > </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero”, directives: { mask: { bind(el, { value }) { const mask = value el.value = wearMask(el.target.value, mask); }, componentUpdated componentUpdated(el, { value }) { const mask = value let unformatted = removeMask(el.target.value) el.value = wearMask(unformatted, mask); } } }, } </script>

<template> <input type=”text” id=”currency” v-mask=”’(###)###-####’” v-model=”currentMask” > </template> <script> import { wearMask, removeMask } from “./utils” export default { name: “v-dinero data() { return { currentMask: null } }, directives: { mask: { bind(el, { value }) { const mask = value el.value = wearMask(el.target.value, mask); }, componentUpdated(el, { value }) { const mask = value let unformatted = removeMask(el.target.value) el.value = wearMask(unformatted, mask); } } }, } </script>

Component Pattern Hooks ?????????????????????

Component Pattern “Hooks” ?????????????????????

Component Pattern “Hooks” Compositional Functions ?????????????????????

Mixins can’t consume and use state from one to another, but Hooks can. This means that if we need to chain encapsulated logic, it’s now possible with Hooks. — Evan You Why use this pattern?

import { useData, useComputed } from “vue-hooks”; export function computeMask() { function wearMask(numstr) { //format code// } const data = useData({ unformatted: null }); } const computed = useComputed(() => { return { formatted: { get() { return data.unformatted; }, set(e) { data.unformatted = wearMask(e.target.value); } } } } return { computed };

import { useData, useComputed } from “vue-hooks”; export function computeMask() { function wearMask(numstr) { //format code// } const data = useData({ unformatted: null }); } const computed = useComputed(() => { return { formatted: { get (){{ get() return data.unformatted; }, set(e) { data.unformatted = wearMask(e.target.value); } } } } return { computed };

import { useData, useComputed } from “vue-hooks”; export function computeMask() { function wearMask(numstr) { //format code// } const data = useData({ unformatted: null }); } const computed = useComputed(() => { return { formatted: { get() { return data.unformatted; }, set(e) { data.unformatted = wearMask(e.target.value); } } } } return { computed };

<template> <input type=”text” :value=”formatted.get()” @input=”formatted.set(e)” /> </template> <script> import { computeMask } from “../hooks/computeMask” export default { name: “VDinero”, hooks() { const { computed } = computeMask(); const { formatted } = computed } return { formatted }; } </script>

<template> <input type=“text” :value=”formatted.get()” :value=“formatted.get()” @input=”formatted.set(e)” > /> </template> <script> import { computeMask } from “../hooks/computeMask” “../hooks/computeMask” export default { name: “VDinero”, hooks() { const { computed } = computeMask(); const { formatted } = computed } return { formatted }; } </script>

<template> <input type=“text” :value=”formatted.get()” :value=“formatted.get()” @input=”formatted.set(e)” /> </template> <script> import { computeMask } from “../hooks/computeMask” export default { name: “VDinero”, hooks() { const { computed } = computeMask(); const { formatted } = computed } return { formatted }; } </script>

<template> <input type=”text” :value=”formatted.get()” @input=”formatted.set(e)” /> </template> <script> import { computeMask } from “../hooks/computeMask” export default { name: “VDinero”, hooks() { const { computed } = computeMask(); const { formatted } = computed } return { formatted }; } </script>

Why use this pattern? Maybe don’t use that… — Vue people I chatted with

import { value, computed } from ‘@vue/observer’ export function useComputeMask() { const unformatted = value(0) const formatted = computed( () => unformatted.value, val => { let unformattedVal = removeMask(val) unformatted.value = wearMask(unformattedVal) } ) return { formatted } }

import { value, computed } from ‘@vue/observer’ ‘@vue/observer’ export function useComputeMask() { const unformatted = value(0) const formatted = computed( () => unformatted.value, val => { let unformattedVal = removeMask(val) unformatted.value = wearMask(unformattedVal) } ) return { formatted } }

import { value, computed } from ‘@vue/observer’ ‘@vue/observer’ export function useComputeMask() { const unformatted = value(0) const formatted = computed( () => unformatted.value, val => { let unformattedVal = removeMask(val) unformatted.value = wearMask(unformattedVal) } ) } return { formatted }

import { value, computed } from ‘@vue/observer’ export function useComputeMask() { const unformatted = value(0) const formatted = computed( () => unformatted.value, val => { let unformattedVal = removeMask(val) unformatted.value = wearMask(unformattedVal) } ) return { formatted } }

<template> <input type=”text” v-model=”formatted” /> </template> <script> import { useComputemask } from “../cp” export default { name: “VDinero”, data() { const { formatted } = useComputemask(); } return { formatted }; } </script>

Input Events The Role of Reactivity Reusable component patterns

Methods, Computeds, Directives, Renderless Components, Hooks Compositional Functions, Oh my!

🤔

Usability User Experience Developer Ergonomics

Thanks! @shortdiv

Input Masking with Vue

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75