Bookmarklet for Copy/Paste
Diclophis
I would like to bounce some ideas off the group and see what would be
the best direction to take for my "Copy/Paste" bookmarklet.
Currently I have developed a simple bookmarklet that is able to grab
the current window.location, and then "saves" it to a "clipboard" (it
actually loads it into an element in a new window). Then there is a
second bookmarklet that can "paste" the element from the "clipboard"
window into another current document.
The problem I have now is, there is no way for the DOM to tell us what
is the currently focused element. So I need some way for the "paste"
bookmarklet to know what input element should receive the value (right
now, it just alert()s the value on the second window).
Here are my thoughts dumped out, maybe someone can help me make sense
of them?
1. Rather than just blindly grab the window.location for "copying", I
can prompt the user for which element they want to copy? (display a
new window with all the text elements, with some button or something
that says "copy this"). Or even, develop a microformat that is a
special class that developers can use on their pages that indicates to
the bookmarklet that this element is likely to be copied/pasted (<p
class="iphone_copiable">...</p>), and then enumerate over those, and
prompt the user for which one they want to copy.
2. Then for the pasting, perhaps either enumerate over all the input
type="text" or "textareas" on the page, and prompt the user which one
should receive the copied value, or develop some standard
microformatesque thing like <input type="text" class="iphone_pastable"/
>
3. Maybe attach an event onto the onBlur for all elements, that would
then paste the copied value? The problem with that is, if there are
existing events on the element, the order of event execution could not
be guaranteed, and therefore it would not be possible to ensure that
the copied value was present in the element before the form was
submitted.
4. perhaps some sort of keyword you put into an element, that you want
to overwrite when you run the "paste" bookmarklet (same problem as 3.
though, if the form is submitted onBlur, then after putting in the
keyword, there would be no time to run the bookmarklet and have it
overwrite the keyword)
I have the current form of the Copy/Paste bookmarklets up on my site:
http://iphonebookmarklets.com/
Please post your thoughts, and or any bookmarklets you have developed/
come across so I can add to my list.
Thanks
Diclophis
I have further developed the bookmarklet to open a second window that
is actually an webpage dedicated to the "clipboard" functionality.
What you do is, hit the copy url link, it will then open a new window,
and place the url in the window surrounded by a blue box (if you hit
copy url more than once, it will add additional entries, and you can
select which entry you want to paste by clicking on it in the
clipboard)
Then you hit the paste url link, it will then parse the current dom,
and load all "text input boxes" ids into the clipboard window, you
then goto the clipboard, and select which id you want to paste the
value into.
It works fine so far, the only problem is there is some sort of cross-
domain security check in place that prevents windows with pages that
aren't on the same domain name from accessing the the clipboard.
My next attempt will be to use a div and possibly some server-side
magic to make the copy/paste work.
Hardy Macia
I had thought about doing a copy & paste through the bookmarks, but
you really can't go anywhere with it.
My solution was have user click on find button for url, pops open a
new page so they can navigate to where they want to go, the switch
back to my app and click on the paste icon which copies the url of
the page they navigated to into my url field. Ditto for the image
field, but it's much harder to open a page with just the image since
that tends to be a popup navigation item in most browsers.
See http://www.pointatme.com/ to find the code. You can click on the
"+" to get to the screen with the magnify glass for opening the window.
- Hardy
Elliot
of the iPhone. I am sure all of you have heard complaints about the
few "critical flaws" in the iPhone, that really are the few missing
things stopping many would-be iPhone users from switching over to the
iPhone. While several of these problems are not really fixable (like
AT&T exclusivity for people who don't want to switch to AT&T), copy
and paste functionality is really not that hard for anyone to
implement. Because of this, I expect Apple will add copy and paste
support in a future version of the firmware (*hint* *hint* apple
developers), however I think it is up to the developer community at
the moment to fill this rather trivial but blatant gap.
These copy and paste bookmarklets are the first step, but I think we
need to go much further than bookmarklet support for copying URLs). I
worked on a copy and paste javascript file during iphonedevcamp for a
little while, but it never got finished... I haven't really had the
time since to finish it, but the idea was to have a single javascript
include (that you could also feasibly use as a bookmarklet as well)
that gives copy and paste functionality in all textarea elements
(although extending this to really any text on the page would not be
very hard).
You can see a demo of this (in a pretty rough sorry) at
http://elliot.kroo.net/iphone/mophie/ . Click on the little down
button at the very bottom of the page to put the textarea into a
"selection mode" click somewhere inside the text to set the beginning
of the selection, and click again somewhere else to set the end of the
selection. You can then copy or cut the selection. Go back into
editing mode by clicking the arrow at the corner of the textarea to
paste.
This idea would truly add selection, copy, and paste to the iphone
browser.
Some more ideas of what this could turn into:
- a floating UI element for copying the URL, much like the copy/paste
bookmarklets above.
- an element that allows you to paste the URL into an email
- browser detection using non-standard javascript elements (like
getSearchEngine?) for inclusion into any webpage meant to work on many
browsers, not just the iphone
- use onblur to switch editing/selection modes? maybe?
suggestions?
(warning, shameless plug for more developers imminent)
I apologize for not linking to anything close to a final product. If
anyone out there is interested/agrees with me, especially if they are
willing to put a little time into it themselves, I can put it on
google code and turn it into a nice polished result =).
Finally, a link to the source code (not very pretty at the moment):
http://elliot.kroo.net/iphone/copypaste/copypaste.js
--
Elliot
On Jul 12, 2:30 pm, Hardy Macia <hardyma...@gmail.com> wrote:
> I had thought about doing a copy & paste through the bookmarks, but
> you really can't go anywhere with it.
>
> My solution was have user click on find button for url, pops open a
> new page so they can navigate to where they want to go, the switch
> back to my app and click on the paste icon which copies the url of
> the page they navigated to into my url field. Ditto for the image
> field, but it's much harder to open a page with just the image since
> that tends to be a popup navigation item in most browsers.
>
> Seehttp://www.pointatme.com/to find the code. You can click on the
tybaby
serious about getting a copy and paste web-based solution, I suggest
getting with the iUI folks, and possibly have the code integrated with
them. This way all iPhone developers can benefit from a single iPhone
javascript library with copy & paste as a feature. Hopefully, Google
Gears will be able to run on the iPhone, so that we can have a
persistent local storage, instead of copying text to the server and
pasting it down from the server to another iUI-based app. Just my 2
cents.
On Jul 12, 12:09 pm, Diclophis <diclop...@gmail.com> wrote:
> Here is an update:
>
> I have further developed the bookmarklet to open a second window that
> is actually an webpage dedicated to the "clipboard" functionality.
>
> What you do is, hit thecopyurl link, it will then open a new window,
> and place the url in the window surrounded by a blue box (if you hitcopyurl more than once, it will add additional entries, and you can
> select which entry you want topasteby clicking on it in the
> clipboard)
>
> Then you hit thepasteurl link, it will then parse the current dom,
> and load all "text input boxes" ids into the clipboard window, you
> then goto the clipboard, and select which id you want topastethe
> value into.
>
> It works fine so far, the only problem is there is some sort of cross-
> domain security check in place that prevents windows with pages that
> aren't on the same domain name from accessing the the clipboard.
>
> My next attempt will be to use a div and possibly some server-side
> magic to make thecopy/pastework.
>
> On Jul 11, 11:52 am, Diclophis <diclop...@gmail.com> wrote:
>
> > Hello,
>
> > I would like to bounce some ideas off the group and see what would be
> > the best direction to take for my "Copy/Paste" bookmarklet.
>
> > Currently I have developed a simple bookmarklet that is able to grab
> > the current window.location, and then "saves" it to a "clipboard" (it
> > actually loads it into an element in a new window). Then there is a
> > second bookmarklet that can "paste" the element from the "clipboard"
> > window into another current document.
>
> > The problem I have now is, there is no way for the DOM to tell us what
> > is the currently focused element. So I need some way for the "paste"
> > bookmarklet to know what input element should receive the value (right
> > now, it just alert()s the value on the second window).
>
> > Here are my thoughts dumped out, maybe someone can help me make sense
> > of them?
>
> > 1. Rather than just blindly grab the window.location for "copying", I
> > can prompt the user for which element they want tocopy? (display a
> > new window with all the text elements, with some button or something
> > that says "copythis"). Or even, develop a microformat that is a
> > special class that developers can use on their pages that indicates to
> > the bookmarklet that this element is likely to be copied/pasted (<p
> > class="iphone_copiable">...</p>), and then enumerate over those, and
> > prompt the user for which one they want tocopy.
>
> > 2. Then for the pasting, perhaps either enumerate over all the input
> > type="text" or "textareas" on the page, and prompt the user which one
> > should receive the copied value, or develop some standard
> > microformatesque thing like <input type="text" class="iphone_pastable"/
>
> > 3. Maybe attach an event onto the onBlur for all elements, that would
> > thenpastethe copied value? The problem with that is, if there are
> > existing events on the element, the order of event execution could not
> > be guaranteed, and therefore it would not be possible to ensure that
> > the copied value was present in the element before the form was
> > submitted.
>
> > 4. perhaps some sort of keyword you put into an element, that you want
> > to overwrite when you run the "paste" bookmarklet (same problem as 3.
> > though, if the form is submitted onBlur, then after putting in the
> > keyword, there would be no time to run the bookmarklet and have it
> > overwrite the keyword)
>
> > I have the current form of theCopy/Pastebookmarklets up on my site:
tybaby
the Chicago iPhone Tech Talk on Aug 28? If so, please let me know so
we can hook up and possibly exchange some ideas on this. If Apple goes
ahead and implements the copy & paste function before then, I guess it
is still a good idea for other smartphones that need this kind of
functionality.
On Aug 16, 9:24 am, tybaby <thomasy...@gmail.com> wrote:
> Have you or any one else gotten any further with this? If anyone is
> serious about getting acopyandpasteweb-based solution, I suggest
> getting with the iUI folks, and possibly have the code integrated with
> them. This way all iPhone developers can benefit from a single iPhone
> javascript library withcopy&pasteas a feature. Hopefully, Google