del.icio.us .:. tweet

iClipper: Client-Side iPhone Copy and Paste .:. kentbrewster.com

The first thought I had after building Cleeper was "Dude, this is way too complicated. It should just copy straight to e-mail." Here it is:

iClipper

If you're on an iPhone, or if you have an e-mail client set up for your computer's Web browser, try it now. Click it once, and then click one of the paragraphs on this page.

The Difference Between iClipper and Other Solutions

Unlike other Web-based solutions, iClipper does not send the content you're trying to paste back and forth to a third party site. It lives and works entirely on your device, and nobody can ever see what you're doing or prevent you from doing it.

Installing iClipper

Thanks to alert reader Hardcle and a bit of hacking and writing just now, we have a nothing-but-iPhone install page:

Install Now Without Safari Sync

Go there and do what the page says and you should be up and running without synching bookmarks from Safari. If you have not already made the mistake of syncing your Safari bookmarks, definitely do this; syncing from Safari will bring over a couple of bookmark folders ("Bookmark Bar" and "Bookmarks Menu") that you will not be able to remove later.

If that didn't work, click the Install Through Safari link just below for Plan B:

Install Through Safari

Using iClipper

  • Bring up Safari on your iPhone, go to the page you want to copy from, and click the little book-shaped thingie in the bottom bar. Either your History or Bookmarks bar will probably come up; you want Bookmarks, and then Bookmarks Bar.
  • Click your iClipper bookmark, and then tap whatever you want to copy.
  • If all goes well, your e-mail client will pop up with a message filled in. The subject line will be the title of the page you're on right now; the body will be the text contents of whatever you tapped on the page.
  • From here you can send the contents wherever you want, or simply save as a draft. Presto, copy and paste.

Caveats and Gotchas

  • Since iClipper looks at a single block-level element--P, LI, DIV, DD, TD, TEXTAREA, or PRE--it might miss important stuff just outside the box. This is especially true for pages using tables-based layout.
  • There's no telling what might happen when this thing encounters non-English character sets.
  • At the moment we're not cleaning up after the copy operation, so if you go back to the original page and tap anything else, you'll see it in your e-mail editor as well. For best results, reload the page instead.

How It Works

Pretty simple stuff: we're going through the DOM, adding an event listener to all the block-level elements we care about, and popping up the contents in a mailto: url:

(function(d) {
   var t=['P','LI','DD','TD','PRE','DIV','TEXTAREA'];
   for(var i=0;i<t.length;i++){
      var n=d.getElementsByTagName(t[i]);
      for (var j=0; j < n.length; j++){
         n[j].addEventListener("click",function(e){
            e.stopPropagation();
            var v = this.innerHTML;
            if (this.tagName === 'TEXTAREA') { v = this.value;}
            v = v.replace(/<[^>]*>/g, '').replace(/\s{2,}/g, ' ').replace(/</g, '&lt;');
            var f = '\n\nClipped from ' + d.location.href + ' with iClipper, available at http://kentbrewster.com/iclipper';
            v = v + f;
            d.location='mailto:?subject=' + d.title + '&body=' + encodeURIComponent(v);
         },false);
      }
   }
})(document);

Thank You

  • Rick Turoczy at ReadWriteWeb, for early link love, and for noticing that iClipper didn't automatically append a link to the page you were clipping from. This has been fixed.
  • Hardcle, for the right direction on installing without Safari.
  • Jed "PasteBud" Schmidt, for blazing the trail.
  • Jim, in the comments, who came through with instructions for disabling that stoopid Windows pop-up every time I plug in my phone.
  • Adrian Cahen, who gently pointed out that the base-64 encoding trick I'm using with Cleeper isn't necessary here. Gosh, that's embarassing. :)

iClipper has miles to go; if you're a developer and are thinking about taking it further, be my guest. (A link back here would be appreciated, of course.) As always, have fun, and please let me know how it goes.

Comments from before Disqus:

Kent Brewster .:. 2009-09-17 10:54:46
Yes, it's been OBE (Overcome By Events), but might still be useful for some who haven't upgraded to version 3. I need to sweep up a bunch of old broken stuff, come to think of it.
Marco .:. 2009-09-09 23:04:17
Well, this is a nice script, but actually not necessary due to OS 3.x? My new VolksPhone can even copy phone numbers to the dialing pad. Regards
David Sanson .:. 2009-05-25 22:34:54
Inspired by hardcle's workaround for adding bookmarklets without syncing, I created a bookmarklet that transforms the urls of all bookmarklets in a page so that they begin with "http://www.google.com/?javascript:". You can even use it to help install itself:
Kent Brewster .:. 2009-02-11 08:52:30
Pascal: Let me think about that for a bit.

I tried something like that in development; it was really annoying when I needed to send a clip to someone else. The workaround was adding myself as a contact and picking a simple name, like "me."
Pascal Van Hecke .:. 2009-02-11 01:51:52
Hi Kent,

I most often send links to myself anyway, because I typically use my iPhone to quickly browse through pages when I have a little time (read: bus stop, elevator, restroom...) and I mail to myself those pages I want to have a second look at.

So for me the added value came mainly when I hardcode my own email address in the javascript, so I didn't have to add select that anymore.

You could add as tip to replace mailto%3a in the script by mailto%3ayourname%40yourdomain.com
Kent Brewster .:. 2009-01-28 22:27:51
Okay, got it, and thanks! I skipped the mail-this-page-to-yourself stage; if you click the link to the installation instructions above, you'll get the script appended to the instructions page and be off and running.

One thing I discovered when I tried it on Vickie's phone: if you have not previously synced your bookmarks to Safari at least once, you will not have a Bookmarks Bar to add it to. Add it to your main bar; it will work fine.
hardcle .:. 2009-01-28 20:40:06
There is a way of doing it without syncing bookmarks, but I'm not sure if it's all that much easier.

Email the following link to your iPhone:

http://www.google.com/__a__#javascript:(function(d){var%20t=[%27P%27,%27LI%27,%27DD%27,%27TD%27,%27PRE%27,%27DIV%27,%27TEXTAREA%27];for(var%20i=0;i%3Ct.length;i++){var%20n=d.getElementsByTagName(t[i]);%20for(var%20j=0;j%3Cn.length;j++){n[j].addEventListener(%27click%27,function(e){e.stopPropagation();var%20v=this.innerHTML;if(this.tagName===%27TEXTAREA%27){v=this.value;}v=v.replace(/%3C[^%3E]*%3E/g,%27%27).replace(/\s{2,}/g,%27%20%27).replace(/%3C/g,%27%3C%27);d.location=%27mailto:?subject=%27+d.title+%27&body=%27+encodeURIComponent(v);},false);}}})(document);

Open the link in Mobile Safari. It'll be 404, but we don't care.

Bookmark the page.

Edit the bookmark to delete everything before 'javascript' (This is the tricky part for me. I have trouble getting the loupe to come up)

Save the change and use as described above.
Kiwiiano .:. 2009-01-28 10:01:46
Whoa! We need a way of loading it without Syncing Safari's entire Bookmark collection. I've got a 32GB iTouch but it's gonna be stuffed to the gunnels with Bookmarks if I just sync. Any way of moving over a small subset? Or just installing iClipper on the iTouch/iPhone?
Jim .:. 2009-01-28 09:08:06
To disable the Camera notification when the iPhone is attached . . .
1.) Go to COntrol Panel / Scanners and Cameras
2.) Right Click on iPhone and Select Propoerties
3.) Select Events Tab and select the "Take no action" option under "Actions"
Kent Brewster .:. 2009-01-27 20:20:38
I'm looking into event delegation tonight, Dmitri. I'm also going to try your <meta name="apple-mobile-web-app-capable" content="yes"> approach on iClock.
Dmitry Baranovskiy .:. 2009-01-27 16:36:01
I think it would be better to attach onclick event to document itself and then analyse e.target. Also function could detach itself, so you don't need to refresh the page. ;)

Copyright Kent Brewster 1987-2014 .:. FAQ .:. RSS .:. Contact