Imagine you have ten fields of text to modify and that you have to press delete each time before entering the new amount. The user experience during data entry can be improved by auto selecting the content of a text field before the user starts typing. That will prevent the user from having to clear the field themselves by using the backspace button.
var fieldLength = Number(this.triggeringElement.value.length); //Get the content’s length
//select the whole content of the field
this.triggeringElement.selectionStart = 0;
this.triggeringElement.selectionEnd = fieldLength;
The reason why On Focus isn’t used is because the same code does not work on iOS devices as of this writing. The drawback of using On Click instead of On Focus is that when tabbing through fields, they won’t be auto selected.
Best practice would be to have your dynamic action on your Global Page and making it affect a certain class, by using a jQuery selector – similar to this:
If the auto select behavior is not required when running the application from a desktop, you could always put a condition on the dynamic action based on the device used. This can be done by reading the HTTP User Agent.
Amongst other things, the User Agent provides information on the browser used by the user. As a result. the condition could look like this:
The condition could be more specific, but since most mobile device browsers have the keyword, mobile, in their User Agent info, this condition is a safe assumption.
Note: For those wondering why didn’t I simply use jQuery’s select() method to select the text field, well, for some reason it didn’t work on iOS devices….*sigh*