SitePoint Sponsor

User Tag List

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

    Does anyone know of a fix for firefox/chrome no copy/paste of content property?

    noscript:after{
    content: "me@domain.com";
    }

    <noscript></noscript>

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    In addition to, I need to be able to copy and paste this. Pretty much all browsers have a problem. They cant grab all the text. Regardless of how I position the "me".

    <style type="text/css">
    #hide6 {
    display:inline-block;
    }
    #hide6 b {
    float:left;
    font-weight:normal;
    }
    </style>
    <span id="hide6">@domain.com<b>me</b></span>

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The only way to prevent people copying content from your page is to not put it in the page in the first place.

    Even if you found something that appears to work in some browsers there is nothing to prevent someone viewing the source of the page and either grabbing the content from there or if they want it without all the HTML tags then they simply need to identify the CSS or JavaScript you are using to try to prevent them copying the content and override that code with their own in the CSS or JavaScript attached to their browser (which takes priority over that attached to the page) in order to disable your code.
    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="^$">

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The only way to prevent people copying content from your page is to not put it in the page in the first place.

    Even if you found something that appears to work in some browsers there is nothing to prevent someone viewing the source of the page and either grabbing the content from there or if they want it without all the HTML tags then they simply need to identify the CSS or JavaScript you are using to try to prevent them copying the content and override that code with their own in the CSS or JavaScript attached to their browser (which takes priority over that attached to the page) in order to disable your code.
    You have it backwards. I WANT them to be able to copy it. They can't with that code. If your around can you take a gander at my thread in the js forum? I still need that code of yours you posted fixed.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Bump

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    To recap. I want to find a way to place the "me" in front of the "@domain.com" and be able to copy and paste it. All ways that I have tried have failed to copy. I know there is some way.

    Code CSS:
    <style type="text/css">
    #hide {
    display:inline-block;
    }
    #hide b {
    float:left;
    font-weight:normal;
    }
    </style> 
    <span id="hide">@domain.com<b>me</b></span>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    I don't think you can do that as the browser copies the html order and not how you have placed it I believe.

    This allows the text to be copied in Firefox but when you paste the "me" is at the right end still.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #hide6 { float:left; }
    #hide6 b {
        float:left;
        font-weight:normal;
        background:red
    }
    #hide6 span { float:right }
    </style>
    </head>
    <body>
    <div> <span id="hide6"><span>@domain.com</span><b>me</b></span> </div>
    </body>
    </html>
    Last edited by spikeZ; Nov 24, 2012 at 11:33.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Oh is it? That sucks. It's same with the full reversal of text with uni something. All browsers copy it but when pasting its backwards. Entering the email with content property Firefox and chrome can't copy it. All others can. If I can find a fix for that one that would be good too. I'm just trying to find another css method for obfuscating the email address. Currently my css fallback is me<b>nospam</b>@domain.com with display none on the b. just looking for a cleaner way. But the pasting needs to be correct - that's crucial.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I thought something like this might work but only Firefox gets it right (or wrong).
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #hide6{display:inline-block;}
    #hide6:first-letter{font-size:0;}
    </style>
    </head>
    <body>
    <div> <span id="hide6">Xme@domain.com</span> </div>
    </body>
    </html>

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    eww that was a good idea! Maybe first letter something else. Like margin or color or line height. I've never used first letter so I'd have to test. Will play with the idea when I'm back to my computer. Thanks Paul you gave me food for thought.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Visibility:hidden cures chrome but IE9 needs both the first letter and the text floated which is a nuisance.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #hide6{display:inline-block;float:left}
    #hide6:first-letter{font-size:0;visibility:hidden;float:left;}
    .test{visibility:hidden}
    
    </style>
    </head>
    <body>
    <div> <span id="hide6">Xme@domain.com</span> </div>
    </body>
    </html>

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Visibility:hidden cures chrome but IE9 needs both the first letter and the text floated which is a nuisance.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #hide6{display:inline-block;float:left}
    #hide6:first-letter{font-size:0;visibility:hidden;float:left;}
    .test{visibility:hidden}
    
    </style>
    </head>
    <body>
    <div> <span id="hide6">Xme@domain.com</span> </div>
    </body>
    </html>
    Well thought Paul! Looks like you just came up with the defacto standard for obfuscating email with CSS. At first glance this works better than all the other methods. The correct copy/paste functionality is upheld, and there is no extra markup. I tested it also, that seems to work well. Not quite sure if I fully trust it since every browser needs a different rule. Time will tell. But seems to be perfect.

    As a side note... trying to think of any times no float on span would fail... looks like you can safely do away with the float left (presumable put there to contain the floated :first-letter)... which makes this more usable in the real world.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The float is only there for ie9- and can be removed if IE9 specific styles were being used and then would be more robust as just inline-block.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I don't have ie9 to test. Oh I thought you just needed float left on :first-letter for ie9. You need it on the span as well?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    IE sometimes seems to work without the float on #hide6 and just use the inline-block but is intermittent when copying the text. The float seems to cure it but does make it awkward as full proof solution because it upsets the flow unlike inline-block.

    There may be a combination in there somewhere that will make it work but I also notice that in Firefox if the span is in the middle of the sentence and you copy the space then the first letter gets copied again.

    Needs a lot of testing still but there may be a combination that works.

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post

    There may be a combination in there somewhere that will make it work but I also notice that in Firefox if the span is in the middle of the sentence and you copy the space then the first letter gets copied again.

    Needs a lot of testing still but there may be a combination that works.
    It's quite around here lately. To me, this is one of those fun ones to play with. Like a treasure hunter, looking for that one special rule.

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    When I played with it yesterday ie8 was fine. Now it's pasting the X. Still hiding it though.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It seems to depend on where you paste from. If you start right and stop on the first character you can usually miss it.


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
  •