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

@Joel that solution makes it look like its not being selected, however the selection still happens and I can drag that selection to another field — user2636664
– user2636664, Commented Mar 23, 2015 at 23:15

Hashem Qolami · Accepted Answer · 2015-03-23 23:13:25Z

18

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

answered Mar 23, 2015 at 23:13

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

RobG Over a year ago

Prevent selection using keyboard —the above doesn't meet this criterion. Use tab to focus the field, which selects the entire content by default, so the value can then be copied. I don't know why anyone would want to do this anyway.

Hashem Qolami Over a year ago

@RobG That's right, however we can do the same thing on focus event — jsbin.com/remihecomi/1/edit?js,output

RobG Over a year ago

@HashemQolami—it's still possible to select the content by starting the selection from outside the element. And in any reasonably modern browser I can inspect the element and copy the content from the inspector. Really, this sort of stuff is pointless.

Getter Jetter Over a year ago

@HashemQolami Selection is also possible, when starting selection from inside the input and stopping outside.

Hashem Qolami Over a year ago

@OlivierKrull I couldn't reproduce it. Can you provide an online example?

|

kanstudio · Accepted Answer · 2019-05-11 07:31:06Z

6

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>

edited May 11, 2019 at 7:31

answered May 10, 2019 at 16:53

kanstudio

711 silver badge2 bronze badges

2 Comments

user2636664 Over a year ago

:D Thanks for the answer, I asked this more than 4 years ago. Hopefully, helps someone else

Igor Over a year ago

And even then: it sadly allows for selection using the keyboard (tab to highlight the input box, auto-selected on focus)

vsync · Accepted Answer · 2022-09-05 11:56:08Z

6

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()'>

edited Sep 5, 2022 at 11:56

answered Dec 20, 2020 at 13:44

vsync

133k61 gold badges345 silver badges430 bronze badges

1 Comment

Daniele Rugginenti Over a year ago

input::selection {background-color: transparent} gives the perfect result

Unmitigated · Accepted Answer · 2018-07-23 19:48:35Z

4

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>

answered Jul 23, 2018 at 19:48

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

1 Comment

Getter Jetter Over a year ago

This prevents the input to be focused by mouse click.

Irushan · Accepted Answer · 2022-04-11 12:13:32Z

1

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>

answered Apr 11, 2022 at 12:13

Irushan

1552 silver badges13 bronze badges

Collectives™ on Stack Overflow

Prevent select on input text field

5 Answers 5

8 Comments

2 Comments

CSS-only solution:

JS Solution:

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

2 Comments

CSS-only solution:

JS Solution:

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related