2

I'm trying to use an input text box as a URL sharing widget. Fairly standard: when you click on the textbox, all of the text inside is automatically highlighted to make it easy to copy and paste. It's set as read-only='read-only' to prevent the user from changing the URL accidentally, and the click event is set to this.focus();this.select();. This works on the desktop.

The problem arises with Safari Mobile (I'm using iOS 7.0.6). From what I can tell, the read-only prevents using the standard setSelectionRange(0,9999);. But if I turn off read-only and just use javascript to prevent editing, the iOS keyboard shows once the text input has focus.

tl;dr On Safari Mobile I'd like to have the uneditable textbox be entirely selected on focus but without showing the keyboard (ideally it would show the copy/paste menu too, but I think that's a stretch). Is this possible?

JSFiddle shamelessly forked from this answer:

JSFiddle showing input with read-only set (Doesn't work on Safari Mobile iOS 7.0.6)

Community
  • 1
  • 1
Matt
  • 2,651
  • 1
  • 21
  • 28
  • 1
    Looks like a duplicate of http://stackoverflow.com/questions/12766671/how-to-enable-user-select-in-a-readonly-html-element-on-ipad-safari. Long story short -- it appears mobile safari doesn't handle the readonly attribute very well. I've concluded it's necessary to remove the readonly attribute to allow for text to be copied. :-( – Puhlze Apr 24 '14 at 15:55

0 Answers0