4-Jul-2016
NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the
FAQ for more details.
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.
My first version of the code went something like this...
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...
Bit ugly, but it works.
-i
A quick disclaimer...
Although I put in a great effort into researching all the topics I cover, mistakes can happen.
If you spot something out of place, please do let me know.
All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle).
Use of any information contained in this blog post/article is subject to
this disclaimer.
Igor Kromin
Other posts you may like...