How do you programmatically select the text of an input field on iOS devices, e.g. iPhone, iPad running mobile Safari?
Normally it is sufficient to call the .select() function on the <input ... /> element, but this does not work on those devices. The cursor is simply left at the end of the existing entry with no selection made.
input.setSelectionRange(0, 9999);
Nothing in this thread worked for me, here's what works on my iPad:
// t is the input field
setTimeout(function() {
t.setSelectionRange(0, 9999);
}, 1);
See this fiddle: (enter some text in the input box and click 'select text')
It is selecting text in an inputbox on my iPod (5th gen iOS6.0.1), opening the keyboard and also showing the Cut/Copy/Suggest... menu
Using plain javascript. Did not try this with jQuery
document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999
Note that the number 999 is just a sample. You should set these numbers to the number of characters you want to select.
UPDATE:
For the last two, you might experiment by triggering a click event on the input element
UPDATE: (07-10-2013)
UPDATE: (14-11-2013)
.selectionStart and .selectionEnd does work.UPDATE: (15-01-2015)
It's hard to prove a negative, but my research suggests this is a bug in Mobile Safari.
Note that focus() works, more or less—though it can require more than one tap to succeed, and it's not necessary if you're trying to respond to a user tap on the field in question as the tap itself will give the field focus. Unfortunately, select() is simply non-functional in Mobile Safari.
Your best bet may be a bug report with Apple.
Sorry, in my earlier post, I didn't notice the Javascript implying that you wanted an answer in Javascript.
To get what you want in UIWebView with javascript, I have managed to scrape together two important pieces of info to get it to work. Not sure about the mobile browser.
element.setSelectionRange(0,9999); does what we want
mouseUp event is undoing the selection
Thus (using Prototype):
input.observe('focus', function() {
this.setSelectionRange(0, 9999);
});
input.observe('mouseup', function(event) {
event.stop();
});
does the trick.
Matt
It looks like focus will work but only when directly called from a native event. calling focus using something like SetTimeout does not appear call up the keyboard. Control of the ios keyboard is very poor. Its not a good situation.
I went nuts looking for this solution, while all your responses did help it opened another can of worms for me.
The client wanted the user to be able to click and select all, and also let the user 'tab' and select all on the iPad (with an external keyboard. I know, crazy...)
My solution to this problem was, rearrange the events. First Focus, then Click, then touchstart.
$('#myFUBARid').on('focus click touchstart', function(e){
$(this).get(0).setSelectionRange(0,9999);
//$(this).css("color", "blue");
e.preventDefault();
});
I hope this helps someone, as you lot have helped me countless times.
With iOS 7 on iPad the only way that I was able to make this work was to use actually <textarea></textarea> instead of <input> field.
e.g.
<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>
How to prevent user from changing text inside area was more difficult, since is you make textarea readonly the selection trick won't work anymore.
Something like the following is working for me for me on Webkit that comes with Android 2.2:
function trySelect(el) {
setTimeout(function() {
try {
el.select();
} catch (e) {
}
}, 0);
}
See Chromium Issue 32865.
If you are using HTML5-compliant browsers, you can use placeholder="xxx" in your input tag.
That should do the job.
