Demo/Playground for JavaScript Auto Select

by Taufik Nurrohman

HTML

<pre><code>&lt;ul class="foo"&gt;
  &lt;li&gt;List item 1&lt;/li&gt;
  &lt;li&gt;List item 2
    &lt;ul&gt;
      &lt;li&gt;List item 2.1&lt;/li&gt;
      &lt;li&gt;List item 2.2&lt;/li&gt;
      &lt;li&gt;List item 2.3&lt;/li&gt;
      ...
      ...
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>

<pre><code>&lt;ul class="bar"&gt;
  &lt;li&gt;List item 1&lt;/li&gt;
  &lt;li&gt;List item 2
    &lt;ul&gt;
      &lt;li&gt;List item 2.1&lt;/li&gt;
      &lt;li&gt;List item 2.2&lt;/li&gt;
      &lt;li&gt;List item 2.3&lt;/li&gt;
      ...
      ...
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>

CSS

body {
    padding:50px;
    background-color:white;
}
pre {
    border:1px solid;
    padding:4px;
    margin:0 0 1em;
}

JavaScript

function autoSelect(elem) {
    var selection, range;
    if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(elem);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) { // IE
        selection = document.selection.createRange().text;
        range = document.body.createTextRange();
        range.moveToElementText(elem);
        range.select();
    }
}

// Eksekusi di sini
$('pre').on("click", function() {
    autoSelect(this);
});