Easier Field Information Change

Some things happen so automatically that we tend not to notice.

The address bar of browsers is an example. When you've loaded a web page and then you tap the URL in the address bar, the editable URL is selected. You can type a new URL without having to erase the old one (it's erased automatically when you begin to type). If you do that a lot, you tend to take the convenience for granted.

It's a bit unhandy when you only want to change something in the current URL (requires an extra tap to deselect). Still, it is easier to unselect with a tap than it is to erase all the data before typing a new URL.

This article describes how to do a "select the field when the field is tapped" for your forms.

The feature may be provided for a form field when a user is more likely to want to update the entire field than to only edit parts of it.

It's simple to implement. Add this attribute to the form field tag.

onfocus="select()"

Here is an example. The field is prepopulated with data. Tap it to select the data ready for instant replacement. Or, tap again to unselect and edit.

Try it. You'll see how it works.

Here is the source code for the above example field.

<input type="text" onfocus="select()" value="This is pre-populated text" style="width:100%;">

So much functionality by adding a small copy-and-paste attribute.

(This content first appeared in Possibilities newsletter.)

Will Bontrager