Preselect Text On Selection

Question

I'm wondering if there is a rule of thumb for the scenario where a user selects a textbox that has content in it. Would it follow that all the text in it should always be selected to allow a user to type a new value with no additional interaction than typing what's new?

Answer 1

Always think about the scenario involving the textbox field:

• For example, if it's a field that is likely to be changed completely each time the user clicks on it, select all the text.
  A good example would be the browser's address bar - the far more common scenario is that the user wants to type in a whole new URL rather than amend the current one.
• However, if the more common scenario is to make a correction, don't select it (think of a field to fill in a web-form, where you might have made a mistake filling in your address and you just want to make a tiny correction).

Another important thing to remember is that users might not expect the selection of the whole text and hence starting to type erases all the previous text. If the text field is long or "difficult" (think address with zip code) the "damage" of erasing it might overcome the benefit of auto-selection.

Answer 2

In my opinion selecting the text would in most cases be unexpected and unnecessary, if not even harmful. However, there are exceptions. Browser's address bar is the best example I can think of. It is probably safe to assume the user usually wants to write a new address instead of modifying the current address, so preselecting the text is helpful.

So my answer would be that text should not be preselected, unless there a specific reason for doing so. In other words, if you don't know which way is the right way to go, then do not preselect. That seems like the safer choice in most cases.

Answer 3

I believe the "rule of thumb" is that no pre-selection occurs. At least. this is how it works in all of our companies software, and also how it works in every app and website I just quickly checked :) If the text was NOT entered by the user (eg, it is default text, like the search box on this site), then that text should be cleared out before the user begins to type...

Answer 4

• If the content in the field has been entered by the user, the text should not be pre-selected. There's a very small chance that the user needs to remove all text from the field, but rather needs to make edits or add additional text.
• If the text in the field is default text before the user has entered the field, then it could be highlighted (assuming the right context - something that needs to be erased before the user types in the field).

Answer 5

It's context again with this ...

You need to assess how likely it is that your user is going to need correct the text in the box and how likely they are to want to overwrite whatever is in the box when focusing on it.

For example: address bars and search boxes are often set to preselect on websites. In both cases there is a chance that a misspelling has been made or that a power user might be directly manipulating the address bar (think of pagination). In the case of search its reasonable to expect a user to want to refine their search by adding an extra keyword or altering one that is there, so deciding to select on focus in both cases must be carefully thought of.

Also, consider how likely the field is to be pre-populated by the browser. For example, an email sign-in box is more likely to be pre-populated than a search box, so an email sign-in box might be a good candidate for select on focus, once its saved the user wont ever want to change it unless they clear their personal data and on focus may well be a new user with a completely different email address.

But with all of this it depends on the context of field and the type of person filling the form in, so I'm not sure there is a clear rule of thumb.

I think the only clear cut cases for select on focus are when the text box contains an URL itself or contains code which the user will want to be cut and paste in its entirety. e.g. Google Analytics tracking code, or a GIT repository / social network profile URL.