How to disable selection / highlighting of a HTML input element?-CodePudding

How to prevent user-selection / highlighting of an <input>?

This:

input { 
  user-select: none;
}

<input type="number" value="123" />

and the methods from How to disable text selection highlighting and CSS disable text selection and don't work on an input.

Note: if possible, I don't want to put the input on disabled mode.

CodePudding user response：

You can hide the selection like this:

input::selection {
    background-color:transparent;
}

The illusion will be broken if the user drags the text after selecting it, but I don't think there's any other way to do it.

(Why would you want to do this though)?

CodePudding user response：

If you want to prevent the user to not be able to select the text value, you must use disabled attribute in your input tag:

<input type="number" value="123" disabled/>

CodePudding user response：

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

var input = document.querySelectorAll('input[type=text]')[0];

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

<input type="text" value="123" />

Please note that this does not work on a input with type=number

CodePudding user response：

You could try to (almost instantly) remove the selection when someone selects something inside the input element with .getSelection().removeAllRanges();.

It is still possible to copy the text if someone is quick.

$("input").select(function() {
    window.getSelection().removeAllRanges();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">

You can improve this by making it look like text is not selectable (see Samuel's answer), I added it into an extra code snippet:

$("input").select(function() {
        window.getSelection().removeAllRanges();
});

input::selection {
    background-color:transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">

After all of this you can also make it imposible for the user to copy anything inside an input field by adding onCopy="return false" to the input field. (It is still selectable but not possible to copy).

<input type="number" value="123" onselectstart="return false" oncopy="return false;" />

You might only want to use 1 or a combination of 2 of those things inside your project. Combine the things you need and you can make an unselectable/uncopy-able input field.

You can also disable cutting/pasting or right clicking according to this article.

CodePudding user response：

Reading your requirements, it seems you'd probably fulfil them best by not using user-facing number input at all, or more precisely, progressively enhance it to some "ticker" structure.

Such progressively enhanced number input without possibility to select the value could be something like:

<form onsubmit="alert('Value is: '   this.v.value); return false">
  <label for="o">Value: </label>
  <!-- Displays the value: -->
  <output id="o" for="plus minus"
    style="min-width: 2em;
      display: inline-block;
      text-align: right; border: 1px solid;
      padding-inline: .5em;
      user-select: none;
      /* user-select: none; is probably not necessary here anymore
         since keyboard input here does not affect the value
      */
">0</output>
  <!-- Holds actual value: -->
  <input name="v" type="hidden" value="0" onchange="o.value=value">
  <!-- Controls: -->
  <button id="plus" type="button" aria-label="Increase value"
  onclick="v.value=Number(v.value) 1;v.onchange()"
  > </button>
  <button id="minus" type="button" aria-label="Decrease value"
  onclick="v.value=Number(v.value)-1;v.onchange()"
  >-</button>
  <hr>
  <input type="submit">
</form>

(Again, this structure is for demonstration only, underlying element should be regular number input. Both should work with screen readers and other assistive technologies, but haven't verified this one ATM.)