Prevent select on input text field

Question

I am trying to prevent selection on an input field with the following considerations

• Prevent selection using mouse
• Prevent selection using keyboard (including Ctrl+A, shift+arrows)
• Allow focusing into field using keyboard and mouse

So far I have tried these things:

CSS

I have attempted the using the following class

.unselectable {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Result: selection still possible

I have also tried below with no success:

$("#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; });

Javascript

I tried the below

$( "#my_field" ).select(function(e) {
        console.log("Select called");
        e.preventDefault();
});

Result: console printed the message, however the select still works

Thanks for your help

Answer 1

It can be done by setting the element's selectionStart to selectionEnd on select event:

var inp = document.getElementById('my_input');

inp.addEventListener('select', function() {
  this.selectionStart = this.selectionEnd;
}, false);

<input id="my_input" type="text" value="Try to select me!" />