18

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

Goldy
  • 201
  • 1
  • 2
  • 6
  • 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". – Anil Sivadas Sep 07 '10 at 09:57
  • 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 http://www.youtube.com/watch?v=_ybh573ZASc The website http://www.pastebud.com/ is not working since apple introduced copy/paste in iOS. Anybody with that java script can help us. – Anil Sivadas Sep 07 '10 at 12:32

4 Answers4

9

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

this.selectionStart=0;
this.selectionEnd=this.value.length;
avs099
  • 10,937
  • 6
  • 60
  • 110
avshalom
  • 91
  • 1
  • 1
7

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 -->
Streeter
  • 71
  • 1
  • 1
4

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
jimmy javascript
  • 41
  • 3
2

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.

Brien Malone
  • 605
  • 1
  • 9
  • 20
  • 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. – SimplGy Mar 18 '11 at 13:46