CODEWITHSUNDEEP
javascriptcss
user2636664
user2636664

Reputation: 411

Prevent select on input text field

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

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

Upvotes: 22

Views: 39186

Answers (5)

vsync
vsync

Reputation: 130780

CSS-only solution:

This will not allow for input text to visually appear selected, while it is.
There are situations where this technique is good enough, if the developer do not care for the input's text to be able to be copy-pasted, but only the visual aspect of the selection is unwanted.

input{ color:transparent }
input::selection{ color:transparent }
<input value='invisible selection'>

It's also possible to use font-size:0 if width & height are defined on the input element.

JS Solution:

When the input gets focused → unfocus it (by calling the blur method):

<input value='unselectable selection' onfocus='this.blur()'>

Upvotes: 5

Irushan
Irushan

Reputation: 155

This is the solution for when if you want pointer icon with cursor.

.input-select {
  position: relative;
  user-select: none;
  cursor: pointer;
}

.input-select::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="input-select">
  <input type="text" value="any"/>
</div>

Upvotes: 1

kanstudio
kanstudio

Reputation: 71

You can cover over the <input> with any layer in absolute position, for example with div.wrapper::after or with other wrapper tag. Then use user-select: none for the wrapper tag (<div>, <label>, etc) and don't use user-select: none on the <input> itself.

But if your wrapper tag is <label> I recommend additionally adding the attribute readonly for the <input> and converting <label> to the block (or inline-block / flex / inline-flex).

input { outline: none; margin: 10px 0; width: 200px; }

.wrapper {
  position: relative;
  user-select: none;
}

.wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

label.wrapper { display: block; }
<div class="wrapper">
  <input type="text" value="Any text in the div wrapper"/>
</div>

<label class="wrapper">
  <input type="text" value="Any text in the label wrapper" readonly />
</label>

Upvotes: 6

Unmitigated
Unmitigated

Reputation: 89527

You can prevent the mousedown event to prevent the selection of the text inside the input.

<input type="text" id="unselectable" value="You can not select this text!"/>
<script>
document.getElementById("unselectable").addEventListener("mousedown", function(event){
  event.preventDefault();
});
</script>

Upvotes: 4

Hashem Qolami
Hashem Qolami

Reputation: 99564

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!" />

Upvotes: 18

Related Questions