When should a text input be auto selected?

Question

By default in most browsers, text inputs become fully selected when you tab into them, but not when you click on them. But in some instances, applications choose to focus the text input when it receives focus (either by tabbing into it or by clicking on it). My inclination is to allow the browser to do it's thing and leave the default behavior, but we often get requests for this behavior too.

I am looking for guidance on when you should write code to automatically select the contents of a text input when it receives focus.

Answer 1

This is a tradeoff decision, so decide by understanding the tradeoffs

There is no "right" answer here because you are trading off:

• The benefits of UX consistency with default browser behavior.
• The potential benefits of custom UX behavior to help users navigate the form faster.
• The benefit of consistent behavior for mouse vs tab focus.
• The benefit of consistent behavior within your form (i.e. should tabbing into an input provide consistent behavior within your form)

Additionally, it may help to understand why the mouse vs keyboard focus behaves differently:

• A mouse allows precise positioning of a cursor within the input box, so a UX decision has been made to give users more control by allowing the user to select the precise cursor location. A user with a mouse can still select the entire input by clicking and dragging.
• A Tab button doesn't have this ability so a UX decision has been made to select the entire text instead.

To make your decision, you can prioritize the following considerations depending on your app:

1. Would a custom/non-default focus behavior help the user complete the form better? For example, if a user is most likely to replace (and not edit) the contents of an input box, then selection of the entire box may help the user complete the form faster.
2. Are the benefits of #1 worth the cost of non-standard form behavior?

Only you can make that decision, but by understanding the tradeoffs you can make it in a well-reasoned way.

Answer 2

I'm not sure there's really a hard choice here.

Assuming the text input looks like any other text box, the options seem to to be:

• A) Override the default behaviour because sometimes you get requests for it - and because you can.

• B) Leave the default behaviour alone because that's what users expect in almost every other scenario in which they use such a common and recognisable ui element whether in this browser, another browser or any other software.

However, maybe there's more options which are like some kind of middle ground:

• C) Override a very specific instance because you believe the default behaviour is wrong, and it's not a scenario in which the users will have particular expectations, and this is backed up by evidence from user testing, and it won't lead user into a situation where they try to use the learnt behaviour you have provided in other places, only to find that everyone the behaviour is different.

• D) Override the behaviour because this is a text input that is different to other inputs - it looks different, has extended functionality, and serves more purposes than simply entering a value. Rightly or wrongly, browser omniboxes could be argued as falling into this category although I know not everyone agrees - which just shows the problem when expectations are broken!

I'm thinking for the purposes of this question, the answer that applies is probably (B) leave the default behaviour alone?