Multi-input setup for license key
I'm making an "activate license" screen with an input for the license key, the license key itself is 5 sets of 6 characters separated by dashes.
I'd like to style it as a series of inputs where each segment is written, with the dashes already built in, and focus moving between the segments as you type or delete, and a paste of the license key fills the inputs and ignores the pasted dashes. Does that make sense as a method? Should I do it in one input but style it to look like many? Is there a secret third option I'm missing? How would I even implement it?
I'm currently running with svelte but I feel like this would require some vanilla js dom manipulation
28 Replies
you should do in whatever way is easier for you
if you want, just 1 fake input with borderless inputs works too
and then you move to the next when there is too much text on one
by the way, with some googling, you might find something
What I really need is an existing site that does that and yoink it violently
codepen should have examples
I'll keep googling see what comes up
you can try it yourself
it isnt rocket science
your best bet is probably to look for phone number inputs or two factor inputs, those are much more common than serial numbers
phone numbers are great gor inspiration for this
many use a select for the country code
or a variation
lots of US phone numbers are split 555-555-1234
two factor is a better bet though, and you can just use the inspector to crib off those
yup, which should be easy since there isnt any magic going on
Keep us posted, I’m curious on what you end up with
So far I've managed to do a large part of it, but for some reason I can't backspace at the 6 character mark
I'll keep playing with it today and hopefully get a proper prototype going that I can share here
you can also share what you have so far, so we can see if we spot the problem
I think I'm just using the wrong keycode range but I'll kepp y'all posted
alright
https://codepen.io/mbaklor/pen/bNbzLgw okay chat what're we thinking?
in terms of ux, this is very confusing
in terms of ui, it looks strange
oh yea ignore the top input I was planning on making that a label but forgot
you can make this into a single input very easily
would that be better ux? last license I entered was like microsoft office 2013 and I kinda like that the segments look separated to make reading it looking for mistakes easier
well, it would certainly look better
would adding dashes between the inputs help or?
cleaned up the ui a bit and now the submit button console.logs the license key
yes, and forcing uppercase and reducing the width of the inputs
forcing uppercase not a bad thought but I need to check if the licensing service I'm using is uppercase only
width I agree, I also set the font to monospace and it feels better as well
these changes I did in my actual app tho I should upstream them to the codepen lol
okay fixed
i think it looks better now
Thanks, if you can think of anything else (functionality or design) I'd love to hear it
i would make the dashes bigger
cant you use regx in the pattern attribute to enforce the length and the dashes
I'm using a regex to verify the paste, but I feel like a 36 character string is harder on the eyes to track and if you make a mistake harder to find where it is, so I really do like the 6 segments in different input fields