I am working on a single page mobile only web app where someone needs to just update numbers, easily and quickly.
I found during some usability testing that having to tap into a field then tap to the end of the field and then start to add the numbers was way too much like hard work.
So I decided that when tapping into the field the whole field should be selected and with the type=tel number pad coming up the user can start to the immediately. Yes this destroys what was typed but to update a 3 digit number is easy and seemed to me to be a lot easier than having to edit an existing number.
You can see the example I created at this link – http://demo.xomino.com/xomino/gstracker.nsf/xHighlightExample.xsp – open it on a mobile for the real effect. The sad face fields do not have the select all the Highlight does. This is only tested iOS 8 – if it doesn’t work for you I would love to know and what device/OS.
To do this I had to google how to selectAll on a phone and ran in the problem that Mark Leusink mentioned during our talk at ConnectED. On a mobile device there is a 300ms delay after a focus or click event to ensure that the user is not zooming or scrolling. Makes sense. But it means that if you try and attach anything to the focus event the timing can be all a screwed up. Looking through StackOverflow I found the following code which forces a wait on the event and ensures the timing works. Without the timeout the selectAll does not work.
This is the code I used to make the effect work
$('.highlighter').on('click', function(){
$(this)[0].setSelectionRange(0, 9999);
})
and this is the SO answer where I got the solution from.
Xomino 