42

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.

Improve this question
12
  • 34
    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.
    – GHP
    Mar 22, 2016 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, 2016 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, 2016 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, 2016 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.
    – GHP
    Mar 23, 2016 at 14:16

3 Answers 3

Reset to default
51

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.

Improve this answer
2
  • 2
    Very nice! Never heard this term before but seems obvious now.
    – DasBeasto
    Mar 22, 2016 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, 2016 at 16:01
21

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.

Improve this answer
2
  • 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.
    – user428517
    Mar 22, 2016 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, 2016 at 16:48
16

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. ;)

Improve this answer
5
  • 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.
    – seth10
    Mar 23, 2016 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.
    – sampathsris
    Mar 23, 2016 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, 2016 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
    – phuclv
    Mar 24, 2016 at 10:09
  • and in many programs you can paste license key properly across all those textboxes in one pass
    – phuclv
    Mar 24, 2016 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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