CODEWITHSUNDEEP
javascriptsortingformataccountbank
Watts Epherson
Watts Epherson

Reputation: 783

How do I format an account name and/or sort code using Javascript?

I am posting this question with my answer so far but would like to invite other solutions as I am not 100% sure about mine.

It will:

Why am I posting a this? I could not find the answer myself on StackOverflow and when you search this question on Google, it keeps returning a PHP answer for StackOverflow instead! There are even answers in there for Javascript. Hopefully this question can produce other solutions too!

How does it work?

This is designed to work with a real-time input.

You would apply this function to your onkeyup or onpaste events, passing 'this' in.

function checkSortCode(el,ev){
      var len = el.maxLength || 8;
            ev = ev || window.event;
            if(ev.keyCode == 8 && el.value.slice(-1) == "-"){
                el.value = el.value.slice(0,-1);
            } else {
                var regex = new RegExp("(\\S{" + (2 - 1) + "}\\S)", "g");
                el.value = el.value.replace(/[^0-9]/g,"").replace(regex,("$1"+"-")).slice(0,len);
            }
        }
.sortcode::placeholder{color:#eeeeee;}
body{font-family:arial,sans-serif;font-size:1.4em;}
input{font-size:1.4em;}
<label>Sort Code</label><br>
<input type="text" name="sortcode" onkeyup="checkSortCode(this,event)" onpaste="checkSortCode(this,event)" class="sortcode" size="8" maxlength="8" placeholder="00-00-00" />

Ideally, I wanted it to show the 00-00-00 format all the time and then the user would fill it in but have padded zeros where they hadn't. That's not easy as the cursor wants to go to the end of the input.

Upvotes: 2

Views: 870

Answers (1)

Kevin Gilbert
Kevin Gilbert

Reputation: 1022

What you're looking for is called Input Masking. You can implement it yourself but I would recommend using a library to separate the actual input value and the mask.

Here an implementation using native js, you'll notice it's a bit janky.

<html>
<body>

    <input id="input">

    <script>
        const pattern = '00-00-00-00'
        const patternRegex = /^[0-9]{2}\-[0-9]{2}\-[0-9]{2}\-[0-9]{2}$/
        const separator = '-'

        /* returns current value completed by the pattern (filled with 0) */
        const fill = value => {
            return `${value}${pattern.substring(value.length)}`
        }

        /* format the input on keyup */
        const format = event => {
        
            /* only format the input at cursor position (to ignore filled pattern) */
            const position = event.target.selectionStart
            const value = event.target.value.substring(0, position)

            /* rollback invalid inputs */
            if (!patternRegex.test(fill(value))) {
                event.target.value = event.target.value.substring(0, position - 1)
                return
            }

            /* change target valuer to include pattern and restore carret position */
            event.target.value = fill(value)
            const newPosition = event.target.value[position] === separator ? position + 1 : position
            event.target.setSelectionRange(newPosition, newPosition)
        }

        const input = document.getElementById('input')
        input.addEventListener('keyup', format)
    </script>

</body>
</html>

You can check some other implementation here : https://css-tricks.com/input-masking/

The reason why it's janky is because we format the input after a change occured. When using a library (or React), you can control the input value before it's rendered.

Upvotes: 1

Related Questions