Select text within a div tag by clicking on content of div tag or a button?

Discussion in 'Javascript' started by visu, Nov 21, 2006.

  1. visu

    visu Guest

    Hi this is a question asked in this group two years back..
    No answer for this question till date.
    now i am in the same situation of the questioner.. to find a solution
    for this problem.

    Can any one help me in this regard.?

    The question is:
    ----------------------------------------------------------------------------------------------------
    Wondering if anyone can tell me if it's possible to have Javascript
    select the contents of a div tag with a unique id by clicking
    somewhere in the contents of that div tag?

    I want to make it as easy as possible for users to copy the contents
    of the div tag for pasting in another page. So, instead of having them
    use the mouse to drag the selection, which can sometimes be annoying,
    I'd like to have them click anywhere within the div tag and have the
    text automatically selected, and then they can simply right click and
    select 'Copy'.

    If this is possible, can anyone give me some advice on how to achieve
    it?

    As an alternative, if a div tag won't respond to an onClick event
    itself, would it be possible to select the contents of that div tag
    (assume, for eg, that it has the unique id of "Copy1") by clicking on
    a button?

    Any help with this would be much appreciated!
    Much warmth,

    Murray
    ----------------------------------------------------------------------------------------------------
    thanx for both questioner and the person who is going to reveal a
    solution for this.
     
    visu, Nov 21, 2006
    #1
    1. Advertising

  2. visu

    Jonas Raoni Guest

    Re: Select text within a div tag by clicking on content of div tagor a button?

    David Golightly escreveu:
    > visu wrote:
    >> Wondering if anyone can tell me if it's possible to have Javascript
    >> select the contents of a div tag with a unique id by clicking
    >> somewhere in the contents of that div tag?


    It's not very reliable what I've wrote, but take a look:

    function select(o){
    if(window.getSelection && document.createRange){
    var s = window.getSelection(), r = document.createRange();
    r.selectNode(o), s.removeAllRanges(), s.addRange(r);
    }
    else if(o.createTextRange)
    o.createTextRange().select();
    }

    select(document.body);

    > Alternativley, you might want to just give users a textarea they can
    > dump text into.


    As a user I preffer to choose what I'll copy and paste, but if the job
    is a kind of routine, then I think you should copy the html/text of the
    element instead of selecting it visually.


    --
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
     
    Jonas Raoni, Nov 21, 2006
    #2
    1. Advertising

  3. visu

    ASM Guest

    Re: Select text within a div tag by clicking on content of div tagor a button?

    visu a écrit :
    > Hi this is a question asked in this group two years back..
    > No answer for this question till date.
    > now i am in the same situation of the questioner.. to find a solution
    > for this problem.
    >
    > Can any one help me in this regard.?


    a subterfuge ?

    function copi(what) {
    var T = document.createElement('textarea');
    T.id='temp';
    T.value = what.innerHTML;
    T.style.width = '100%';
    T.title = 'Clic me to delete me';
    T.onclick = function(){document.body.removeChild(this); }
    document.body.insertBefore(T,what);
    document.getElementById('temp').select();
    alert('right-click in selected area an chose "copy");
    }

    <div onclick="copi(this)">
    blah
    </div>

    > The question is:
    > ----------------------------------------------------------------------------------------------------
    > Wondering if anyone can tell me if it's possible to have Javascript
    > select the contents of a div tag with a unique id by clicking
    > somewhere in the contents of that div tag?


    my idea : no (you gan get a selection but not set it)




    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Nov 21, 2006
    #3
  4. visu

    visu Guest

    David Golightly wrote:
    > visu wrote:
    > > Hi this is a question asked in this group two years back..
    > > No answer for this question till date.
    > > now i am in the same situation of the questioner.. to find a solution
    > > for this problem.
    > >
    > > Can any one help me in this regard.?
    > >
    > > The question is:
    > > ----------------------------------------------------------------------------------------------------
    > > Wondering if anyone can tell me if it's possible to have Javascript
    > > select the contents of a div tag with a unique id by clicking
    > > somewhere in the contents of that div tag?
    > >
    > > I want to make it as easy as possible for users to copy the contents
    > > of the div tag for pasting in another page. So, instead of having them
    > > use the mouse to drag the selection, which can sometimes be annoying,
    > > I'd like to have them click anywhere within the div tag and have the
    > > text automatically selected, and then they can simply right click and
    > > select 'Copy'.
    > >
    > > If this is possible, can anyone give me some advice on how to achieve
    > > it?
    > >
    > > As an alternative, if a div tag won't respond to an onClick event
    > > itself, would it be possible to select the contents of that div tag
    > > (assume, for eg, that it has the unique id of "Copy1") by clicking on
    > > a button?
    > >
    > > Any help with this would be much appreciated!
    > > Much warmth,
    > >
    > > Murray
    > > ----------------------------------------------------------------------------------------------------
    > > thanx for both questioner and the person who is going to reveal a
    > > solution for this.

    >
    > This sounds like an incredibly ambitious project and it would help you
    > to first gain some experience with JavaScript/HTML on some more trivial
    > projects before tackling this. Once you do, you'll have some insight
    > into some of the questions that come up.
    >
    > So, all div tags will respond no problem to an onclick event (always
    > call it onclick, never onClick - javascript is case-sensitive and so
    > is XHTML, so it's best to just adopt this convention). However, the
    > question is - *what* do you want copied. Do you want the entire
    > contents of a div tag? If so, then a recursive function is the way to
    > get the text of an element:
    >
    > function getText(node) {
    > var txt = '';
    > if (node.nodeType == 3) // i.e. it's a text node
    > txt += node.nodeValue;
    >
    > for (var i=0; i < node.childNodes.length; i++)
    > txt += getText(node.childNodes);
    >
    > return txt;
    > };
    >
    > Or do you want the div tag itself? Then you can just clone the node:
    >
    > var newNode = node.cloneNode(true); // optional argument is true if
    > you want to clone children as well
    >
    > Or do you want only a portion of the contents of the div tag? How are
    > you going to have the user specify which portion is to be selected if
    > they just click once and aren't dragging?
    >
    > Also, I would discourage you from trying to mess with the right-click
    > button. Browsers have control over the right-click context menu and
    > there is little you can do to turn that off reliably in all browsers.
    > Give them a "paste" button instead.
    >
    > Alternativley, you might want to just give users a textarea they can
    > dump text into.
    >
    > -David


    First thanx for ur reply..
    i clear my requirement now..

    I ll have a button in page ... and when i click it .. content of a div
    tag has to be get selected (i.e what we normally do with mouse to
    selecting some part of a page).. then i can do CTRl+C to copy the
    selected div content.. to paste it in MS Word or in any other external
    application..

    i ve tried the select + copy + paste sequence with the use of
    temporary text area element to store the innerHTML of Div tag and
    copied to Clipboard. but while pasting the selected content in MS word
    it appears like the textual tags not html formatted.. but when u do the
    same with mouse clicks and drags u get the formatted pasting in ms
    word. why? is it possible to just let to user to select a div while
    clicking a button, pressing ctrl+c to copy and paste the content in
    another application(ms word etc)?.

    > Or do you want only a portion of the contents of the div tag?

    the whole div has to be get selected .. and the div has a common id for
    example let its id as "selectDiv"

    Plz help me
     
    visu, Nov 22, 2006
    #4
  5. visu

    visu Guest

    David Golightly wrote:
    > visu wrote:
    > > Hi this is a question asked in this group two years back..
    > > No answer for this question till date.
    > > now i am in the same situation of the questioner.. to find a solution
    > > for this problem.
    > >
    > > Can any one help me in this regard.?
    > >
    > > The question is:
    > > ----------------------------------------------------------------------------------------------------
    > > Wondering if anyone can tell me if it's possible to have Javascript
    > > select the contents of a div tag with a unique id by clicking
    > > somewhere in the contents of that div tag?
    > >
    > > I want to make it as easy as possible for users to copy the contents
    > > of the div tag for pasting in another page. So, instead of having them
    > > use the mouse to drag the selection, which can sometimes be annoying,
    > > I'd like to have them click anywhere within the div tag and have the
    > > text automatically selected, and then they can simply right click and
    > > select 'Copy'.
    > >
    > > If this is possible, can anyone give me some advice on how to achieve
    > > it?
    > >
    > > As an alternative, if a div tag won't respond to an onClick event
    > > itself, would it be possible to select the contents of that div tag
    > > (assume, for eg, that it has the unique id of "Copy1") by clicking on
    > > a button?
    > >
    > > Any help with this would be much appreciated!
    > > Much warmth,
    > >
    > > Murray
    > > ----------------------------------------------------------------------------------------------------
    > > thanx for both questioner and the person who is going to reveal a
    > > solution for this.

    >
    > This sounds like an incredibly ambitious project and it would help you
    > to first gain some experience with JavaScript/HTML on some more trivial
    > projects before tackling this. Once you do, you'll have some insight
    > into some of the questions that come up.
    >
    > So, all div tags will respond no problem to an onclick event (always
    > call it onclick, never onClick - javascript is case-sensitive and so
    > is XHTML, so it's best to just adopt this convention). However, the
    > question is - *what* do you want copied. Do you want the entire
    > contents of a div tag? If so, then a recursive function is the way to
    > get the text of an element:
    >
    > function getText(node) {
    > var txt = '';
    > if (node.nodeType == 3) // i.e. it's a text node
    > txt += node.nodeValue;
    >
    > for (var i=0; i < node.childNodes.length; i++)
    > txt += getText(node.childNodes);
    >
    > return txt;
    > };
    >
    > Or do you want the div tag itself? Then you can just clone the node:
    >
    > var newNode = node.cloneNode(true); // optional argument is true if
    > you want to clone children as well
    >
    > Or do you want only a portion of the contents of the div tag? How are
    > you going to have the user specify which portion is to be selected if
    > they just click once and aren't dragging?
    >
    > Also, I would discourage you from trying to mess with the right-click
    > button. Browsers have control over the right-click context menu and
    > there is little you can do to turn that off reliably in all browsers.
    > Give them a "paste" button instead.
    >
    > Alternativley, you might want to just give users a textarea they can
    > dump text into.
    >
    > -David


    First thanx for ur reply..
    i clear my requirement now..

    I ll have a button in page ... and when i click it .. content of a div
    tag has to be get selected (i.e what we normally do with mouse to
    selecting some part of a page).. then i can do CTRl+C to copy the
    selected div content.. to paste it in MS Word or in any other external
    application..

    i ve tried the select + copy + paste sequence with the use of
    temporary text area element to store the innerHTML of Div tag and
    copied to Clipboard. but while pasting the selected content in MS word
    it appears like the textual tags not html formatted.. but when u do the
    same with mouse clicks and drags u get the formatted pasting in ms
    word. why? is it possible to just let to user to select a div while
    clicking a button, pressing ctrl+c to copy and paste the content in
    another application(ms word etc)?.

    > Or do you want only a portion of the contents of the div tag?

    the whole div has to be get selected .. and the div has a common id for
    example let its id as "selectDiv"

    Plz help me
     
    visu, Nov 22, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. shruds
    Replies:
    1
    Views:
    962
    John C. Bollinger
    Jan 27, 2006
  2. Mike
    Replies:
    1
    Views:
    438
  3. Bon
    Replies:
    7
    Views:
    484
    Eliyahu Goldin
    Dec 26, 2006
  4. Matthew Louden
    Replies:
    3
    Views:
    306
    Ray at
    Jan 9, 2004
  5. M Wells
    Replies:
    0
    Views:
    152
    M Wells
    Oct 6, 2004
Loading...

Share This Page