CodePen

HTML

            
              
<div class="pure-g">
  <div class="pure-u-1">
    <section class="center">
      <h1>_select()</h1>
    </section>
  </div>
</div>





<div class="pure-g">
  <div class="pure-u-1">
    <section class="center">
      284 bytes gzipped<a href="https://raw.github.com/TimPietrusky/_select/master/js/_select.min.js" target="_blank">
        <button>_select.min.js</button>
      </a>
      
      <a href="http://github.com/TimPietrusky/_select" target="_blank" class="alpha">
        GitHub
      </a>
    </section>
  </div>
</div>





<div class="pure-g-r">
    <div class="pure-u-1-3">
      <section>
        <h2>What?</h2>
        <p>
          This function extends the native JavaScript <code>select()</code> (which <a href="https://developer.mozilla.org/en-US/docs/Web/API/Input.select" target="_blank">only works</a> on <code>input</code> and <code>textarea</code>) so that it can be used to select the content of every DOM element you want. 
        </p>
        <p>
          It's written in Vanilla JavaScript (284 bytes gzipped), so you can use it in combination with or without any library. 
        </p>
        
        <b>Works with</b>
        
        <ul>
          <li>IE 6+</li>
          <li>any other browser</li>
        </ul>
        
        <b>Forced Focus</b>
        
        <p>
          <ul>
            <li>Aggressive focus for <code>input</code> / <code>textarea</code>:<br>
              Selects the whole content of a text element with one click or touch.</li>
          </ul>
        </p>
       </section>
    </div>

  

      
      
    <div class="pure-u-1-3 demo6">
       <section>
        <h2>Demo</h2>
        
        <div class="demo1">Just click anywhere inside me to select the whole text.</div>
         
        <p class="demo2">You can also select <span>child elements</span> if the parent gets a click. </p>
         
        <input class="demo3" type="text" value="This is an input with forced focus." spellcheck="false" />
        
        <br><br>
        
        <textarea class="demo4" cols="30" rows="5" spellcheck="false">This is a textarea with forced focus.</textarea>
          
        <p>
          The <code>img</code> needs a wrapper element in order to be selectable. 
        </p>
          
        <p class="demo5 center">
          <img src="http://placekitten.com/g/400/200" alt="" />
        </p>
          
        <hr />
          
        <p class="center">
          <button class="demo6--button button--alpha">Select the whole column!</button>
        </p>
       </section>
    </div>

         


         
    <div class="pure-u-1-3">
      <section>
        <h2>How to</h2>
        
        <p>Download <code>_select.min.js</code> and include it into your page / script. </p>
        
        <b>Vanilla JavaScript</b>
        <pre><code>var el = document.querySelector('.demo');

el.addEventListener('click', function() {
  _select(this);
});</code></pre>
        
        <b>jQuery</b>
        <pre><code>var el = $('.demo');    

el.on('click', function() {
  _select(this);
});</code></pre>
      </section>
    </div>
</div>

      
      
      
      
<div class="pure-g">
  <div class="pure-u-1">
    <section class="alpha center">
      <p>2013 by <a href="http://timpietrusky.com" target="_blank" class="alpha">Tim Pietrusky</a>
      
      <a href="http://www.reddit.com/r/web_design/comments/1ksjc4/selectjs_extends_the_native_js_select_so_that_it/" target="_blank" class="alpha beta">
        Reddit
      </a>
      
      <a href="http://twitter.com/share?text=_select()+the+content+of+any+DOM+element+you+want&url=http://timpietrusky.com/_select" target="_blank" >
        <button class="button--beta">tweet ( this ) </button>
      </a>
        </p>
    </section>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $emw--color-alpha: #2ecc71;
$emw--color-beta: #3498db;
$emw--color-gamma: #e74c3c;

$emw--unit-alpha: 1.25em;
$emw--unit-beta: $emw--unit-alpha * 1.25;
$emw--unit-gamma: .085s;

body {
  font: 400 $emw--unit-alpha 'Lato', sans-serif;
  line-height: $emw--unit-beta;
  margin: 0;
}

a {
  color: $emw--color-beta;
  text-decoration: none;
    padding: .5em;
    
    @include transition(
      background $emw--unit-gamma ease-in-out,
      color $emw--unit-gamma ease-in-out
    );
    
  
  &.alpha {
    &:hover {
      background: $emw--color-beta;
      color: #fff;
    }
  }
  
  &.beta {
    color: $emw--color-gamma;
    
    &:hover {
      background: $emw--color-gamma;
      color: #fff;
    }
  }
}

h1 {
  display: inline-block;
  font-size: 2.5em;
  font-weight: 700;
  color: #fff;
  background: #000;
  padding: .5em;
  margin: .25em 0 .5em 0;
}

section {
  padding: 0 .75em;
  
  &.alpha {
    border-top: .15em solid #ccc;
  }
}

button {
  font: inherit;
  font-weight: bold;
  height: 2.5em;
  background: $emw--color-alpha;
  border: none;
  padding: .5em;
  margin: 0 $emw--unit-beta / 2;
  color: lighten($emw--color-alpha, 65%);
  cursor: pointer;
  
  box-shadow: 
    .1em .1em 0 .025em rgba(darken($emw--color-alpha, 15%), .9)
  ;
  
  @include transition(
    box-shadow $emw--unit-gamma ease-in-out,
    transform $emw--unit-gamma ease-in-out
  );
  
  &:hover {
    @include transform(scale(1.25, 1.25));
    
    box-shadow: 
      .1em .1em 0 .525em rgba(darken($emw--color-alpha, 15%), .2)
    ;
  }
  
  &:active {
    @include transform(scale(.95, .95));
    
    box-shadow: 
      none
    ;
  }
  
  &.button--alpha {
    background: $emw--color-gamma;
    box-shadow: 
      .1em .1em 0 .025em rgba(darken($emw--color-gamma, 15%), .9)
    ;
  }
  
  &.button--beta {
    background: $emw--color-beta;
    box-shadow: 
      .1em .1em 0 .025em rgba(darken($emw--color-beta, 15%), .9)
    ;
  }
}

input,
textarea {
  display: block;
  font-size: $emw--unit-alpha * .85;
  width: 100%;
  border: .1em solid #ddd;
}

code {
  background: #ddd;
  padding: .25em;
}

pre {
  background: #ddd;
  padding: .25em;
  overflow: auto;
  
  code {
    background: none;
    padding: 0;
  }
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
 * _select()
 *  
 * Extends the native JavaScript select() (which only works 
 * on input and textarea) so that it can be used to select 
 * the content of every DOM element you want.
 *
 * _select(document.querySelector('.class')) or 
 * _select($('.class'))
 *
 * timpietrusky.com/_select
 *
 * 
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 */
function _select(el) {
  var d = document, r, s;
  
  // Transform jQuery into vanilla JS
  el = typeof el[0] === 'undefined' ? el : el[0];
  
  try {
    // Try the default select() for input / textarea
    el.select();

    // [BUG] The default select doesn't work on iOS5+
    // Only input / textarea are selectable
    // Submitted by Fabrice Weinberg
    setTimeout(function() {
     
      el.selectionStart = 0;
      el.selectionEnd  = el.value.length;
    }, 0);

    // Try to disable mouseup on input / textarea
    // in order to don't lose focus on some (mobile) devices 
    // -> forced focus!
    try {
      if (typeof(el.dataset.mouseup) === 'undefined') {
        el.dataset.mouseup = 'true';
        
        // Disable mouseup on input / textarea
        el.addEventListener('mouseup', function(e) {
          e.preventDefault();
        }, false); 
      }
    } catch(e) {}
  } catch(e) {
    
    // Fallback for most browsers
    if (window.getSelection) {
      s = window.getSelection();
      r = d.createRange();
      r.selectNodeContents(el);
      s.removeAllRanges();
      s.addRange(r);
      
    // Fallback for <= IE8
    } else if (d.body.createTextRange) { 
      r = d.body.createTextRange();
      r.moveToElementText(el);
      r.select();
    }
  }
}





/**
 *
 * Demo code
 *
 */
var d = document;

/**
 * Helper function for event binding. 
 */ 
function bind(el, eventName, eventHandler) {
  var el = document.getElementsByClassName(el)[0];
  
  if (el.addEventListener) {
    el.addEventListener(eventName, eventHandler, false); 
  } else if (el.attachEvent){
    el.attachEvent('on'+eventName, eventHandler);
  }
}

/**
 *
 * Bind click events for all the 5 demos.
 *
 */ 
bind('demo1', 'click', function () {
  _select(this);
});

bind('demo2', 'click', function () {
  _select(this.children[0]);
});

bind('demo3', 'click', function () {
  _select(this);
});

bind('demo4', 'click', function () {
  _select(this);
});

bind('demo5', 'click', function () {
  _select(this);
});

bind('demo6--button', 'click', function () {
  _select(document.getElementsByClassName('demo6')[0]);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................