Select all DIV text with single mouse click

Question

How to highlight select the contents of a DIV tag when the user clicks on the DIV   the idea is that all of the text is highlighted selected so the user doesn t need to manually highlight the text with the mouse and potentially miss a bit of the text   For example  say we ve got a DIV as below    lt div id  selectable  gt http   example com page htm lt  div gt       and when the user clicks on any of that URL the whole URL text is highlighted so they can easily drag the selected text around in the browser  or copy the complete URL with a right click   Thanks

User · Answer

I found it useful to wrap this function as a jQuery plugin:

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

So, it becomes a reusable solution. Then you can do this:

<div onclick="$(this).selectText()">http://example.com/page.htm</div>

And it will selected test in the div.

User · Answer

fn selectText   function          return   this  each function  index  el            if  document selection                var range   document body createTextRange                range moveToElementText el               range select              else if  window getSelection                var range   document createRange                range selectNode el               window getSelection   addRange range                         Above answer is not working in Chrome because addRange remove previous added range  I didnt find any solution for this beside fake selection with css

User · Answer

Easily achieved with the css property user-select set to all  Like this    x000D   x000D  div anyClass   x000D    user-select  all  x000D    x000D   x000D   x000D

User · Answer

For content editable stuff  not regular inputs  you need to use selectNodeContents  rather than just selectNode    NOTE  All the references to  document selection  and  createTextRange    are for IE 8 and lower    You ll not likely need to support that monster if you re attempting to do tricky stuff like this   function selectElemText elem           Create a range  a range is a like the selection but invisible      var range   document createRange            Select the entire contents of the element     range selectNodeContents elem           Don t select  just positioning caret         In front         range collapse           Behind         range collapse false           Get the selection object     var selection   window getSelection            Remove any current selections     selection removeAllRanges            Make the range you have just created the visible selection     selection addRange range

User · Answer

Niko Lay  How about this simple solution        lt input style  background-color white  border 1px white solid   onclick  this select     id  selectable  value  http   example com page htm  gt            Code before    lt textarea rows  20  class  codearea  style  padding 5px   readonly  readonly  gt    Code after    lt textarea rows  20  class  codearea  style  padding 5px   readonly  readonly  onclick  this select     id  selectable  gt    Just this part onclick  this select     id  selectable  in my code worked fine   Selects all in my code box with one mouse click    Thanks for help Niko Lay

User · Answer

This snippet provides the functionality you require  What you need to do is add an event to that div that which activates fnSelect in it  A quick hack that you totally shouldn t do and possibly might not work  would look like this   document getElementById  selectable   onclick function        fnSelect  selectable          Obviously assuming that the linked to snippet had been included

User · Answer

UPDATE 2017   To select the node s contents call   window getSelection   selectAllChildren      document getElementById id       This works on all modern browsers including IE9   in standards mode    Runnable Example    x000D   x000D  function select id    x000D    window getSelection   x000D       selectAllChildren  x000D        document getElementById  target-div    x000D         x000D    x000D   outer-div    padding  1rem  background-color   fff0f0    x000D   target-div   padding  1rem  background-color   f0fff0    x000D  button        margin  1rem    x000D   lt div id  outer-div  gt  x000D     lt div id  target-div  gt  x000D      Some content for the  x000D       lt br gt Target DIV x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt button onclick  select id    gt Click to SELECT Contents of  target-div lt  button gt  x000D   x000D   x000D      The original answer below is obsolete since window getSelection   addRange range   has been deprecated  Original Answer   All of the examples above use       var range   document createRange        range selectNode           but the problem with that is that it selects the Node itself including the DIV tag etc   To select the Node s text as per the OP question you need to call instead       range selectNodeContents          So the full snippet would be       function selectText  containerid              var node   document getElementById  containerid             if   document selection                 var range   document body createTextRange                range moveToElementText  node                 range select              else if   window getSelection                 var range   document createRange                range selectNodeContents  node                window getSelection   removeAllRanges                window getSelection   addRange  range

User · Answer

Using a text area field  you could use this   Via Google    lt form name  select all  gt        lt textarea name  text area  rows  10  cols  80       onClick  javascript this form text area focus   this form text area select     gt       Text Goes Here        lt  textarea gt   lt  form gt    This is how I see most websites do it  They just style it with CSS so it doesn t look like a textarea

User · Answer

x000D   x000D  function selectText containerid    x000D      if  document selection       IE x000D          var range   document body createTextRange    x000D          range moveToElementText document getElementById containerid    x000D          range select    x000D        else if  window getSelection    x000D          var range   document createRange    x000D          range selectNode document getElementById containerid    x000D          window getSelection   removeAllRanges    x000D          window getSelection   addRange range   x000D        x000D    x000D   lt div id  selectable  onclick  selectText  selectable    gt http   example com page htm lt  div gt  x000D   x000D   x000D    Now you have to pass the ID as an argument  which in this case is  selectable   but it s more global  allowing you to use it anywhere multiple times without using  as chiborg mentioned  jQuery

User · Answer

How about this simple solution       lt input style  background-color white  border 1px white solid   onclick  this select     id  selectable  value  http   example com page htm  gt    Sure it is not div-construction  like you mentioned  but still it is worked for me

User · Answer

The answer of Neuroxik was really helpful  I had only a trouble with Chrome  because when I clicked on an external div  It did not work  I could solve it removing the old ranges before add the new range   function selectText containerid        if  document selection            var range   document body createTextRange            range moveToElementText document getElementById containerid            range select          else if  window getSelection              var range   document createRange            range selectNode document getElementById containerid            window getSelection   removeAllRanges            window getSelection   addRange range            lt div id  selectable  onclick  selectText  selectable    gt http   example com page htm lt  div gt

User · Answer

There is pure CSS4 solution   selectable      -webkit-touch-callout  all     iOS Safari        -webkit-user-select  all     Safari        -khtml-user-select  all     Konqueror HTML        -moz-user-select  all     Firefox        -ms-user-select  all     Internet Explorer Edge        user-select  all     Chrome and Opera        user-select is a CSS Module Level 4 specification  that is currently a draft and non-standard CSS property  but browsers support it well     see  search user-select   x000D   x000D   selectable      -webkit-touch-callout  all     iOS Safari        -webkit-user-select  all     Safari        -khtml-user-select  all     Konqueror HTML        -moz-user-select  all     Firefox        -ms-user-select  all     Internet Explorer Edge        user-select  all     Chrome and Opera       x000D   lt div class  selectable  gt  click and all this will be selected  lt  div gt  x000D   x000D   x000D   Read more on user-select here on MDN and play with it here in w3scools

[javascript] Select all DIV text with single mouse click

Examples related to javascript

Examples related to css