SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Does anyone know of a JS copy to clip board script that works cross browser?

    Does anyone know of a JS copy to clip board script that works cross browser? Two hours on google and all I can find are a couple ones that seem to only work in conjuntion with the <textarea> and only in IE.

    I want to put a link that says (copy), and when they click it it highlights all the text within the <pre>. Thanks!

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, are you looking for the JS to highlight the text in the <pre> OR for it to be copied to clipboard??

    Maybe use JS to loop through the <pre> tags and put them inside their own <textarea>'s. Then apply the copy script to that.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually this scrpit looks pretty solid: http://www.dynamic-tools.net/toolbox/copyToClipboard/

    And with this HTML: (.e.g)

    Code HTML4Strict:
    <pre id='testText'>#COPYTOCLIPBOARD CODE#</pre>
     
    <a onclick='copyToClipboard(document.getElementById('testText').innerHTML);' href="#">Copy</a>

    Obviously making it unobstrusive would be best though.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Making it unobtrusive wouldn't be too difficult at all.
    I wouldn't have a link there though, because there is no location to link to, not even for accessiblity purposes. A button make much more sense, and people using it won't expect to be taken to another page when they click it.

    Code html4strict:
    <pre id='testText'>#COPYTOCLIPBOARD CODE#</pre>

    Code javascript:
    (function () {
        var el = document.getElementById('testText');
        var button = document.createElement('button');
        var text = document.createTextNode('Copy to Clipboard');
        button.appendChild(text);
        button.onclick = function () {
    		copyToClipboard(el.innerHTML);
    	}
        if (el.nextSibling) {
            el.parentNode.insertBefore(button, el.nextSibling);
        } else {
            el.parentNode.appendChild(el);
        }
    })();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi guys, thanks! How would I incorporate the button in with that js? My js knowledge is slim to none.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Of course few devices that can run JavaScript (apart from computers) even have a clipboard to copy to and so there is no cross browser solution that will work for most browsers. Also the clipboard isn't part of your web page and so you shouldn't have access to write to it - I certainly don't want anyone writing anything to the clipboard of my computer from a web page since I often have something stored there that I'm trying to keep there until I need it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That script creates the button and places it below the element that you want to be able to copy. Place the script at the bottom of the page, just before the </body>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There is also a method that uses a small flash file: http://www.jeffothy.com/weblog/clipboard-copy/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •