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.

By : sroebuck


Answers


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
By : bart s


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.

By : clozach


This video can help you solving your question :)
By: admin