Programmatically selecting text in an input field on iOS devices (mobile Safari)

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);

https://developer.mozilla.org/en/DOM/Input.select

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);

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.

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:

• iPod5 - iOS6.0.1 - Working ok.
• iPad1 - iOS5.1.1 - Only text selected. Tap selection once to open Cut/Copy menu
• iPad2 - iOS4.3.3 - Only text selected. Tap selection once to open Cut/Copy menu

For the last two, you might experiment by triggering a click event on the input element

UPDATE: (07-10-2013)

• iPod5 - iOS7.0.2 - Using the fiddle in the link: Can't see typed text in input box. Pressing select redirects me to facebook.com (??? wtf ???) no idea what's going on there.

UPDATE: (14-11-2013)

• iOS 7.0.3 : Thanks to the comment from binki update that the .selectionStart and .selectionEnd does work.

UPDATE: (15-01-2015)

• iOS 8.x.x : Thanks to the comment from Michael Siebert. Taken from the comment: I had to listen for both focus AND click events and then setTimeout/_.debounce to make it work in both cases: click the input or focus through tabbing

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.

1. element.setSelectionRange(0,9999); does what we want

2. 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.

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.

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.

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.

If you are using HTML5-compliant browsers, you can use placeholder="xxx" in your input tag. That should do the job.