Unselectable does not work on webkit

Question

$('input').on('focus', function() {
    $(this).val('example');
    $(this).attr('unselectable', 'on').css('user-select', 'none').on('startselect', false);
});

When I try to select field value on Chrome or Opera, I'm able to do that. On Firefox and IE it's fine.

Is there any way to disable text selecting in input field?

IE 10, Chrome 30, Opera 17.

Source: http://jsfiddle.net/VmDDY/

I believe the event is `selectstart`, not `startselect`. Not sure if that will solve your problem though. — Jason P, Oct 16 '13 at 12:42
i think this [link](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select?redirectlocale=en-US&redirectslug=CSS/user-select) tells that the feature is not supported by the browsers you've mentioned — Aditya Vikas Devarapalli, Oct 16 '13 at 12:47

score 1 · Answer 1 · answered Oct 16 '13 at 12:51

Try this,

CSS

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

SCRIPT

$('input').on('focus', function() {
    $(this).val('example');
    $(this).attr('unselectable', 'on')
           .addClass('unselectable').on('startselect', false);
    //add class ------^
});

Opera does not supports user-select

score 0 · Answer 2 · answered Oct 16 '13 at 12:52

You need to use all the correct CSS variations:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

but this link tells that the feature is not supported by the browsers you've mentioned

Unselectable does not work on webkit

2 Answers2