www.webdeveloper.com
Results 1 to 7 of 7

Thread: Invisible text (in a div)... not to be selected and copied

  1. #1
    Join Date
    Mar 2009
    Posts
    13

    Invisible text (in a div)... not to be selected and copied

    Hi

    I have div's in my page that are set to "display: none".... and they are only displayed once triggered by a radio button.

    I have many of these divs...

    The thing is i want ppl on the page to be able to highlight and select the VISIBLE text only, and be able to copy and paste it elsewhere....

    Currently what it does is when you highlight and select the visible text, it selects all the visible AND invisible text, so when you copy and paste it, all the text is pasted.

    Anyway i can work around this so i only visible text can be selected and copied?

    Thanks

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Hmmm....interesting issue, I never knew that it would do that before.

    The only way around it is to not have the invisible text on the page - by that I mean instead of using JS to change the display property of an element, use JS to create the element (and all the content within it) and place it on the page in it's proper position.

    I don't want to overstate the obvious - but you then have to remove the entire element when the radio button is not selected in order for this to fully work.

    Do you have a link to the page?
    Last edited by aj_nsc; 04-08-2009 at 07:52 PM.

  3. #3
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    that's how is supposed to work. consider the following:
    Code:
    <p>paragraph 1</p>
    <p style='display:none;'>para 2</p>
    <p>para 3</p>
    if you select from paragraph 1 to para 3 you will also get para 2 because the second P is between them. you might not see it but the browser do. my suggestion is to place all div on a different location, of course, hidden. when a selection is done, move the visible element node to proper location. that way you don't have to create an element with JS each time user make selection. of course, when another selection is made, put back the element node to original place and bring in the new visible element node.

  4. #4
    Join Date
    Mar 2009
    Posts
    13
    Quote Originally Posted by ZeroKilled View Post
    that's how is supposed to work. consider the following:
    Code:
    <p>paragraph 1</p>
    <p style='display:none;'>para 2</p>
    <p>para 3</p>
    if you select from paragraph 1 to para 3 you will also get para 2 because the second P is between them. you might not see it but the browser do. my suggestion is to place all div on a different location, of course, hidden. when a selection is done, move the visible element node to proper location. that way you don't have to create an element with JS each time user make selection. of course, when another selection is made, put back the element node to original place and bring in the new visible element node.
    How do you move the visible element node to a different location on selection?

  5. #5
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    use appendChild method. say for example:
    <div id="container"></div>

    <div id="holder">
    lots of div here
    </div>

    when a radio is selected, you will get the proper div element from holder div and use appendChild method on container div element to move in the selected div. of course, the holder div has to be placed on a position very far from the container div, probably just before the closing body tag. is very likely that user select the content beyond the boundary. the purpose is to avoid user selecting content not visible.

  6. #6
    Join Date
    Mar 2009
    Posts
    13
    Quote Originally Posted by ZeroKilled View Post
    use appendChild method. say for example:
    <div id="container"></div>

    <div id="holder">
    lots of div here
    </div>

    when a radio is selected, you will get the proper div element from holder div and use appendChild method on container div element to move in the selected div. of course, the holder div has to be placed on a position very far from the container div, probably just before the closing body tag. is very likely that user select the content beyond the boundary. the purpose is to avoid user selecting content not visible.
    Or would it be easier to create a "copy to clipboard" button? and allow it to only copy visible text

  7. #7
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    would not work, you still will get the same problem as you explained in first post. also, copy to clipboard using javascript isn't great idea, the only browser that allow access to clipboard is msie unless configured not to do.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles