User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

screenshot of input field

I have seen this input element often when inputting a serial number or similar code. Each text field accepts N characters, after which focus is automatically transferred to the next field. Pressing backspace when there are no characters in a field moves focus to the previous field. In this way, the fields are segregated for easier reading but content flows for ease of use.

I apologize if this has been asked before, but it's hard to search for when I don't know what search term to use.

share|improve this question
27  
You call it "crap". This is one of the more annoying features designers put in trying to be helpful. It means I can't copy-paste the whole code. Also, if I mistype the last character of a given field, hitting "delete" or "backspace" won't clear that last letter, as the focus has now moved to the next field. Make SURE you are actually helping your users before you implement this. – Graham Mar 22 at 19:46
2  
@Graham under certain circumstances this is a blessing. The use case is bureaucratic forms with fixed-length data common in banks, gov offices and the like, with which the user works several hours per day. Else it's annoying. – Juan Lanus Mar 22 at 19:54
12  
@Graham I have seen at least one implementation that properly handled a paste of the full code into the first box. And I think I might have seen one where backspacing worked too, to a degree - if you had one character entered in box 2 and pressed backspace, the cursor would move to the end of box 1, and then typing a key would put that character into box 2. But this is the exception, not the rule. – Dan Henderson Mar 22 at 23:08
2  
@Graham: I used to "be with you" on this but it depends entirely on the implementation. In fact many inputs for serial numbers nowadays consist of separate boxes yet handle a paste into any of them graciously and split the string from the clipboard over the boxes. They also handle backspace etc correctly, and many handle correcting single characters - even at the "edges" graciously. – Marjan Venema Mar 23 at 9:06
2  
Even the BEST implementation of AutoTab (with the features suggested by Dan and Marjan above) suffers from the problem that if a user is really used to tabbing through forms a lot, they will hit the Tab key out of habit right after the AutoFocus moves the focus to the next field, resulting in the focus being on one field too many to the right. Before you implement the AutoTab, you need to run real user tests to make sure your specific users are not prone to this error. – Graham Mar 23 at 14:16
up vote 47 down vote accepted

I have always known this as Auto Tab or (Auto tab input fields). As a matter of fact a search for Auto Tab gives me different ways of implementation of this element, including:

And even Microsoft dev calls it that way.

share|improve this answer
1  
Thank you for the answer and useful links! – setht Mar 21 at 20:44
    
Thanks - learned something new! :) – Pdxd Mar 21 at 21:39
2  
Very nice! Never heard this term before but seems obvious now. – DasBeasto Mar 22 at 11:55
1  
@DasBeasto to be honest when I saw your answer I also thought "well, it could easily be an Input mask as well", hence why I said I have always known the element with this name (but open to be wrong, of course). probably both definitions would work, I just think the Auto Tab definition includes a behavioral component – Devin Mar 22 at 16:01

Input Mask

This would be an example of an input mask implementation

An input mask refers to a string expression, defined by a developer, that governs what a user is allowed to enter in as input in a text box

Some frequent uses of input masks include entry of telephone numbers, ZIP or postal codes, times and dates.

https://en.wikipedia.org/wiki/Input_mask

This example is a bit more intricate than typical input masks as they normally consist of one input box with the rules/dashes implemented inside of it, but it still serves the same purpose.

share|improve this answer
4  
a version without auto-tab would also be also an input mask. i don't think this answer is specific enough to truly answer the question. – sgroves Mar 22 at 22:04
    
@sgroves agreed! I concede that Devins answer surpasses mine as to specificity. Autotabs are a form of input masks but input masks are not necessarily autotabs, so his is more correct. I'm just leaving it in case others find it useful. – DasBeasto Mar 23 at 16:48

I've known it as auto-tab, but avoid using these if you can!

They have bad UX -- if the user makes a mistake in the last character of an input, they can't just hit delete (the expected functionality for 99.9% of other inputs). They'll have to use the mouse or shift+tab to go back to the other inputs. It also ruins the ability to copy/paste.

Somebody just mentioned in a comment: "Under certain circumstances this is a blessing. The use case is bureaucratic forms with fixed-length data common in banks, gov offices and the like, with which the user works several hours per day". This could be solved by simply formatting the input with spaces, dashes, etc using masked inputs

masked input

Using several inputs unnecessarily fragments the data and will mean that it will have to be concatenated either on the front-end or back-end.

If it isn't meant to be concatenated and is a matter of having to store the data as separate items, then split it in the back-end -- the UX should be decoupled from that.

The only valid use case I can think of is to troll pirates by making them type out key codes instead of allowing them to paste. ;)

share|improve this answer
    
Thanks for the great answer! Originally I was just wondering if this was standard in html, like as a value of the type attribute of the <input> tag. Obviously it seems like it isn't, but might be a fun personal programming exercise to implement this in a way that the cursor stays at the end after the last character, and pasting in a value accurately fills the correct sections. – setht Mar 23 at 1:17
    
The amount of effort needed to implement a masked input and a correct implementation of auto-tab (with delete support for previous field and copy/paste compliance) is pretty much the same. But I do like masked input. Because it feels more natural. – Krumia Mar 23 at 9:17
    
"It also ruins the ability to copy/paste.". This is one of the main reasons this specific element is used, to avoid copy/paste. See most SN on most applications. Anyways, I'm not vouching for it or anything, just explaining each element can work (or be horrible) depending on context – Devin Mar 23 at 20:36
    
no, I've seen a lot of programs that delete correctly. When pressing delete at the beginning of the current textbox it'll delete back to the previous textbox – Lưu Vĩnh Phúc Mar 24 at 10:09
    
and in many programs you can paste license key properly across all those textboxes in one pass – Lưu Vĩnh Phúc Mar 24 at 10:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.