Selecting text in mobile Safari on iPhone

Question

I'm trying to make it easy for an iphone user to copy some text to the clipboard in mobile safari. As in the usual "touch-hold-copy". There is a specific bit of text I want to a user to copy. I have full choice of the html markup in which to wrap the text. How can I make it easy, rather than abitrary? For instance:

• Is there a way to "select all" the text upon touch-down using javascript? Then a user could just continue to touch-hold and then choose copy?

• Is there a way to bring up the "select all" option? Like you can when typing in a text box? After which they can choose copy?

• If there's no javascript solution, how can I arrange the html to help Safari select the right bit of text easily? As opposed to just a word, or a wrapping div?

I've tried onFocus="this.select()" for various elements, none seem to work. Also tried onClick.

Those who have tried to port a site that uses ZeroClipboard to the iPhone might have some ideas.

Cheers

Selfsupporting

I was trying for the same feature in my iPhone application. Anybody who has doubt regarding the feature can see the it in the iPhone application "Opera". – Overman

Before the copy/paste were introduced to iOS, there was a java script bookmark named pastebud. Here is the youtube video of the java script in action youtube.com/watch?v=_ybh573ZASc The website pastebud.com is not working since apple introduced copy/paste in iOS. Anybody with that java script can help us. – Overman

Answer 1

instead of this.select(); I used the following and it worked!

this.selectionStart=0;
this.selectionEnd=this.value.length;

Swaddle

Answer 2

The magic sauce for me was the combination of these three:

onFocus="this.selectionStart=0; this.selectionEnd=this.value.length;" <!-- for big screens -->

onTouchEnd="this.selectionStart=0; this.selectionEnd=this.value.length;" <!-- for small screens -->

onMouseUp="return false" <!-- to stop the jitters -->

Mun

This worked for me with onClick instead of onFocus/onTouchEnd. onMouseUp was important – Youmans

Answer 3

Try ontouchstart instead of onfocus. Onfocus fires approx. 500ms after ontouchend, same as onclick, onmousedown, and onmouseup. See https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7 for more details on mouse events.

Wolford

Answer 4

I have run into the same problem. The onfocus event is the right one to trap (ontouchstart isn't triggered if you use the iphone keyboard [next]/[prev] buttons.) If you put an alert(); in your onfocus="" handler, you'll see the alert box pop up. The problem is this.select(); I still haven't found an answer to this, but when/if I do, I'll post it here.

Hoboken

I've had the same issue. focus is the right event to trap, definitely. I think for a minor usability enhancement like this, I'm OK chalking it up to broken mobile safari and letting them fix it. – Bohner