title: Prevent select on input text field
body: <p>I am trying to prevent selection on an input field with the following considerations</p>
  
  <ul>
  <li>Prevent selection using mouse</li>
  <li>Prevent selection using keyboard (including Ctrl+A, shift+arrows)</li>
  <li>Allow focusing into field using keyboard and mouse</li>
  </ul>
  
  <p>So far I have tried these things:</p>
  
  <p><strong>CSS</strong></p>
  
  <p>I have attempted the using the following class </p>
  
  <pre><code>.unselectable {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  </code></pre>
  
  <p>Result: selection still possible</p>
  
  <p>I have also tried below with no success:</p>
  
  <pre><code>$("#my_field").attr('unselectable','on')
       .css({'-moz-user-select':'-moz-none',
             '-moz-user-select':'none',
             '-o-user-select':'none',
             '-khtml-user-select':'none', 
             '-webkit-user-select':'none',
             '-ms-user-select':'none',
             'user-select':'none'
       }).bind('selectstart', function(){ return false; });
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <p>I tried the below</p>
  
  <pre><code>$( "#my_field" ).select(function(e) {
          console.log("Select called");
          e.preventDefault();
  });
  </code></pre>
  
  <p>Result: console printed the message, however the select still works</p>
  
  <p>Thanks for your help</p>