Professional JavaScript For Web Developers

Forms and Data Integrity
Select Text Example
function selectText() {
var oTextbox1 = document.getElementById(“txt1”);
oTextbox1.focus();
oTextbox1.select();
}
This example displays a text box and a button. When you click the button, the text in the text box is
selected.
Text box events
Both text box types support the previously mentioned form-field blur and focus events along with two
others: change and select.
❑
❑
change — Occurs when the text box loses focus after the user changed the value (does not fire
if you change the value setting the value property).
select — Occurs when one or more characters have been selected, either manually or by
using the select() method.
Note the difference between the change event and the blur event. The blur event fires whenever the text
box loses focus; the change event fires when the text box loses focus as well, but only if the text in the text
box has changed. If the text is the same and the text box loses focus, only the blur event is fired; if the text
has changed, the change event fires first, followed by the blur event. Try it out to better get the hang of it:
The select event, on the other hand, has nothing to do with the focus of the text box. This event fires
when one or more characters are selected by the user or when the select() method is called. You can
experiment with it:
Select text automatically
When a user is entering information into a traditional desktop application, it is not uncommon for the
entire contents of a text box to be highlighted when the user tabs into it. This can be accomplished on
both an input-style text box and a textarea in HTML very easily: Just add the code “this.select()” to
the control’s onfocus event handler:
345