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

Question

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.

Solution 1

input.setSelectionRange(0, 9999);

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

Solution 2

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

Solution 3

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.

Solution 4

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

Solution 5

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

View more solutions

Comments

[Nir Levy]

Our testing indicates the same. It's a bug/missing-feature in mobile safari.

[jrummell]

FWIW, it works in Chrome Desktop and Android Browser, which are also based on WebKit.

[DuStorm]

We're having the same issue and found your solution worked - but we're using jquery (mobile actually). /* select the text inside the fill-ins */ $("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; });

[DuStorm]

This worked for me but had to include stopping the mouseup on the same inputs.

[caitriona]

I don't think this is what the question was asking

[andi1984]

You are my hero for today! Works like a charm! ;-)

[bart s]

@andi1984 where do I claim the hero badge?

[andi1984]

Do you know about the compatibility to other iOS versions? Does it work on iOS5 and iOS4?

[Michal Stefanow]

Works for me on iOS6 BUT a) doesn't work on desktop Chrome b) doesn't work when text input is disabled :( My use case: I generate unique URL and want faciliate sharing.

[binki]

@barts I’m going to guess that you ended up on Facebook because the “Share” menu at jsfiddle must be messed up and tappable while invisible perhaps. I ended up clicking the invisible Twitter button myself when testing with iOS-7.0.3 on an iPad. I also found that when I thought I was tapping on your <input/>, the iPad thought I was tapping in jsfiddle’s “CSS” pane (wherein anything I typed was invisible). Once I got my tap directed at the correct <input/>, your “select text” button works perfectly fine on iOS-7.0.3 :-).

[binki]

@binki Actually, I wasn’t tapping in the “CSS” pane, I was tapping in the “embed this code” or similar text things in jsfiddle’s Share dropdown.

[bart s]

@binki thanks for the comment... glad to know I am not the only one :-)

[binki]

@barts Well, my point was, the .selectionStart plus .selectionEnd does work in iOS-7.0.3, care to update your post :-p?

[Doug]

This did not work for me on either an iPad or an iPhone

[allieferr]

This only worked for me if I triggered .focus() on the input before invoking input.setSelectionRange. If you're listening for the focus event on the input, remember to account for an infinite loop.

[JayPea]

A gotcha that is worth mentioning: this will not work on textareas if they have the readonly attribute set.

[zok]

It also won't work on iOS if the textarea is disabled

[Atav32]

@allieferr can you explain more about the infinite loop?

[Aaron Jessen]

I'm using iOS 8 on iPad and iPhone, and the code from @DuStorm (comment above this one) is the only thing that worked for me out of all the answers given here. To reiterate, the following at least works on iOS 8 in Chrome and Safari: $("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; });

[Michael Siebert]

Update for IOS 8: 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.

[bart s]

@MichaelSiebert: could you add the specific iOS version please? I will update the post according to that.

[SuperSpy]

@JayPea what is your solution?

[Admin]

I spent over an hour playing with various solutions. Calling setSelectionRange() in a focus handler works when you trigger .focus() programmatically, but when you manually tap into the text input on iOS, the selection does not happen. Suffice it to say, all you need to do is call setSelectionRange() within a setTimeout of 0 and it works as expected no matter what triggers the focus.

[saike]

this do the f**kin trick! Thank you! works with 'click' event

[Lucas]

I had to use focusin instead of focus for this to work, iOS 7

[Milad]

To make it work for IOS 'document.getElementById("p1").setSelectionRange(0, 9999)'

[carestad]

Possible to update the fiddle with the iOS 8 working code?

[bart s]

@carestad: unfortunately I do not have iOS devices at hand anymore. I will not be able to update the fiddle and test it for correct operation.

[Vaclav Kusak]

Thanks you very much!!

[Peter]

Note: this doesn't work if the input is of type="number". Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.