TL;DR ASB bank made their own input field masker and it doesn't handle copy and paste.

So bank with ASB, and when I want to use my money by doing a online bank transfer I have to type in the recipients account number. This is bull shit. I have to TYPE their account number. I cant copy and paste it. Those account numbers are long, 15 digits long, like im going to remember it. I dont want to make a mistake and give the money to someone else.

I want to copy and paste it!

ASB have split the input into its sections, presumably for style, or maybe they think we all care that the second section is the branch id. Im not going to go there, im on the internet! Anyway I just need to put my friends back account number in. But its long and I only have it in an email so I want to copy and paste it!

So I click on in the first box and paste, only to be met with bitter disappointment. Its only put 2 of the 15 numbers in. What about the other 13, I need to put those in or it'll error when I enter my password and click next to go to the next page. Then I'll have to start over.

They've used 4 different input fields <input type="text"> . With some funny javascript so when you'r typing in the numbers, once you've filled one box it'll move you to the next one. But you cant arrow forward or back between boxes, you can tab forward, but not back.

Heres the funny little bit of JS AccountNumberFieldSupport.js
Seriously, do the ASB web developers want to be mucking around with that. Look at that code, its checking if its netscape navigator. Do you really want to care about that. Surely you dont need to do that. And checking if someone is arrowing through by checking the keycode. That explains why it sometimes throws me to the next field when im not expecting. Thats a buggy little bit guys.

Do you trust that navigator.appName property, it lies. Thats some crazy legacy thing. My new chrome says its navigator, and my keypress events have a keycode property, you dont need to use the which.

Whats up with the style anyway. A masked input as 4 independent inputs, thats a bit ugly. And it stops copy and paste. Thats encouraging more error prone data entry. Surely more of us want to copy and paste than people that are still using netscape navigator.

I've developed a weird behaviour to try get around this limitation. I do the copy and paste then paste into my browsers "find on page" input. It doesn't limit how much text I can paste. Then I read from there and type into the shitty four field.

ASB you should just use a library for this. Like this open source one JQuery Masked Input. It masks input beautifully lets you copy and paste, and doesnt care how old my browser is.

I almost feel bad for insulting ASB's websites design. I look at the front page and its really pretty, with its big out of focus background image and simple login. But I didn't come here look at a picture or to login, I came here to send money to an account. And that was way too hard.