Einar Egilsson

Multi Input Paste: A better UX for multiple input boxes

Posted: Last updated:

I've been using iwantmyname.com for all my domains in the last few months. I'm generally very happy with them, the support has been good, and the one time I tweeted them about an error regarding icelandic phone numbers for 2-factor auth they fixed the issue within an hour! So this post is not a criticism of them, just more of a general thought about good UX, that's both useful for simple use cases and for power users.

I recently needed to change the nameservers for all my domains. I have 15 domains, and each domain has 4 nameservers, so all in all there were 60 input fields that needed to be changed. I started diligently copying and pasting each one, but after the first two domains I thought there must be an easier way to do this! After all, why spend 15 minutes doing manual work, when you can spend an hour and find a nice technical solution? ;)

My nameservers are in AWS, and they list the nameservers for each domain in a block of text, like so:


What I really wanted to do was just copy that whole text block, and paste it into iwantmyname's UI, reducing the copying and pasting from 60 times to 15. One way to do that would be if they just had one big <textarea /> tag for the nameservers instead of 5 input boxes. However, each input box displays red or green depending on if the server name in it is valid, and that wouldn't really work in a textarea. Not to mention that having just one textarea would look ugly.

So, my idea was that if you put the cursor in the first input box, and pasted a multiline block of text it would be split up into lines, and each line put in its own input box and validated. Best of both worlds, the normal UI looks good and is easy to use, but you can still paste multiple nameservers easily! This could be applicable to many cases where you have a list of things to enter, and you want to validate each one. I created a quick JSFiddle to demonstrate this:

The way it works is simple: subscribe to the paste event in the first input box, split up the text if it's multiple lines and put them in the input boxes. Finally, trigger the blur event on each changed input, to activate the validation immediately.

I also created a quick user script for iwantmyname, so I could use this immediately myself. The user script can be downloaded here. So, all in all I spent a lot more time on this than I would have if I had copy-pasted 60 times, but hey, at least I had fun doing it :)

If you read this far you should probably follow me on Twitter or check out my other blog posts.