0

I've been searching high and low for something like this, but for some reason I'm having trouble making it work. I'm not sure what I'm missing or doing wrong.

References found here: http://www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html

Selecting text in an element (akin to highlighting with your mouse)

If someone could possibly spare some time would be much appreciated thanks.

I'm setting up a banner exchange for copy and pasting codes using the new bootstrap 3.0.2, prettify, and select2.js referring to a demo which was found here.

(function() {
    function selectText(element) {
        var doc = document
            , text = element
            , range, selection
        ;
        if (doc.body.createTextRange) { //ms
            range = doc.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) { //all others
            selection = window.getSelection();
            range = doc.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
    preTags = document.getElementsByTagName('pre');
    for(var i=0;i<preTags.length;i++) {
        preTags[i].onclick = function() {selectText(this)};
    }
})();

Here is a demo code I've set up.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Banners Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
    <script src="js/select2.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <div style="margin-top: 20px;"></div>

  <div class="container">

<div style="margin-top:50px;"></div>

<ul class="nav nav-pills">
  <li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li>
</ul>



<div class="tab-content">

  <div style="margin-top:20px;"></div>
  <div class="tab-pane fade in active" id="demo1">
  <p></p>
  <p>Copy and Paste Code:</p>

  <pre class="prettyprint linenums lang-html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify.JS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

  </div>


  </div>

</div>


<div style="margin-top: 50px;"></div>

</div>
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
    <script>
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>
  </body>
</html>
Community
  • 1
  • 1
user2407463
  • 23
  • 1
  • 7
  • 1
    The million dollar question is: what is the question? – tenub Jan 15 '14 at 21:01
  • I've had a lot of difficulty finding a cross-browser way to select text from a standard element. You may not like my solution, but I just create a standard input/textarea on click, replacing the original element. Then you can just `.focus().select()` (with jQuery) to select all. On blur, show the original again. If your element were already textarea or text input, you shouldn't have any trouble! – Radley Sustaire Jan 15 '14 at 23:11

2 Answers2

1

Maybe, you could use window.getSelection() to get the global Selection objects, and then modify it? Example from developer.mozilla.org:

var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();

if(s.rangeCount > 0) s.removeAllRanges();

for(var i = 0; i < strongs.length; i++) {
   var range = document.createRange();
   range.selectNode(strongs[i]);
   s.addRange(range);
}
lexasss
  • 302
  • 1
  • 2
  • 9
0

Thanks guys, I really appreciate your help. I did some research on your responses, and had gotten a reply from the author of the script. I was pulling my hair out and kind of wanted to throw the puter out the window :P

Anyways, the author Satya stated that the select.js script needs to be at the END of the document rather in the header. It works great too!

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Banners Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="container">
<div style="margin-top:50px;"></div>
<ul class="nav nav-pills">
  <li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li>
</ul>
<div class="tab-content">
<div style="margin-top:20px;"></div>
<div class="tab-pane fade in active" id="demo1">
<p></p>
<p>Copy and Paste Code:</p>
<pre class="prettyprint linenums lang-html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify.JS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>
</div>
</div>
<div style="margin-top: 50px;"></div>
</div>
<script src="js/select2.js"></script>
    <script>
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>
  </body>
</html>
user2407463
  • 23
  • 1
  • 7