How to stop selection by mouse in an input type without making it disable/readonly

Question

There is html-code:

<input type="text">

I need to deny selecting text in <input>

See question that was answered already on SO. [Disable text selection on input fields](https://stackoverflow.com/questions/22773049/disable-text-selection-on-input-fields) — FD3, Apr 10 '17 at 13:20
decision:
for mozilla: use css:
input { -moz-user-select: none; }
for other: use js
$('input').bind('mousemove', function (e) { e.preventDefault(); }); — Михаил Поправко, Apr 11 '17 at 07:13

Simon · Answer 1 · 2017-04-10T17:00:12.467

2

Since user-select: none won't work for an input, you could solve it like this:

.invisable-selection::selection { 
  background: transparent; 
}

<input class="invisable-selection" type="text" value="test" oncopy="return false">

It won't show the selection and it won't copy the value.

edited Apr 10 '17 at 17:00

answered Apr 10 '17 at 13:42

Simon

but easily modify this using inspect element – Baezid Mostafa Apr 10 '17 at 13:58
1

@MostafaBaezid yeah obviously. You cannot prevent this. – Simon Apr 10 '17 at 14:04

score -2 · Answer 2 · answered Apr 10 '17 at 13:13

-2

You may try like, it's not affect any major style changes,

<input type="text" value="john" readonly>

answered Apr 10 '17 at 13:13

krishna

4

Using your live test case, I **can** select the text with the mouse and I **can't** edit it, so it fails the requirements in the question on at least two counts. – Quentin Apr 10 '17 at 13:15

2 Answers2