Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

Something as simple as the jQuery .select() should just work across all browsers and platforms but it doesn't. I know jQuery Mobile attempts to solve the deficiencies that the multi-platform/device ecosystem creates, however not everyone wants to use jQM and sometimes it's easier to create a small workaround. This is exactly what I did to get input field text selection working for my Travel Microblog project.

This is what I was trying to achieve...A popover div displaying an <input type="text"> form element with a URL. I wanted to have this field focused and its text selected as soon as it was displayed.
iosinpselect.jpg


My first version of the code went something like this...
 This doesn't work on iOS
var shareInput = $.('input#shareUrl');
shareInput.focus();
shareInput.select();


That worked on all the browsers I tried it with on the desktop, but refused to select the text on my iPhone. Apparently this is a known issue, the solution relies on not using .select()! Counterintuitive isn't it!

So if .select() can't be used what then?



The trick is to go back to the non-jQuery code (I know right!) and set the selection manually. For this you set the selectionStart and selectionEnd attributes.

The code now becomes something like this...
 This works on iOS
var shareInput = $.('input#shareUrl');
shareInput.focus();
shareInput[0].selectionStart = 0;
shareInput[0].selectionEnd = shareInput.val().length;


Bit ugly, but it works.

-i

Hope you found this post useful...

...so please read on! I love writing articles that provide beneficial information, tips and examples to my readers. All information on my blog is provided free of charge and I encourage you to share it as you wish. There is a small favour I ask in return however - engage in comments below, provide feedback, and if you see mistakes let me know.

If you want to show additional support and help me pay for web hosting and domain name registration, donations, no matter how small, are always welcome!

Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...