Prevent Select on Input Text Field

Prevent select on input text field

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

HTML how to disable select in text input field

this solution should work for you:

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

How to prevent select event from firing after every input?

You can change the logic in your onSelect to be able to determine whether or not to execute the selected logic.

onSelect={(event) => {
  if (document.getSelection().toString().length > 0) {
     // your selection logic
     window.alert(document.getSelection().toString());
  }
}}

This way the logic will be executed only if the user is selecting something and not on other primary events that might set off the secondary select event (focus, keypress, etc).

How to disable Ctrl+A from selecting text of input fields when focus is not on an input field

I suggest trying to add code below in your CSS can help you to achieve your requirement.

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

Modified example:

<html>
  <head>
    <style type = "text/css">
      body{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      table {
        -webkit-user-select: none;
        -ms-user-select:     none;
        user-select:         none;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>
          Normal Text
        </td>
      </tr>
      <tr>
        <td>
          <a href = "">Link</a>
        </td>
      </tr>
      <tr>
        <td>
          <select>
            <option value = "a">Select A
            <option value = "b">Select B
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <input type = "button" value = "Button">
        </td>
      </tr>
      <tr>
        <td>
          <input type = "text" value = "Input Field 1">
          <input type = "text" value = "Input Field 2">
        </td>
      </tr>
    </table>
  </body>
</html>

How do I disable text selection with CSS or JavaScript?

<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>

Prevent Select on Input Text Field