Search code examples
htmlgoogle-chromesafarimicrosoft-edgeopera

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

The code below prevents Ctrl+A from selecting the whole HTML page and the mouse from selecting anything, which is great.

But unfortunately Ctrl+A doesn't work on some elements in every browser as desired:

  • Ctrl+A when focus is on a link, selection or button: Nothing should be selected
  • Ctrl+A when focus is on an input field: The text in the current input field should be selected

With Mozilla Firefox and Internet Explorer everything works as desired. Great!

But with Google Chrome, Opera, Edge and Safari is doesn't work as desired. When the focus is on a link, selection or button, Ctrl+A selects the text of all input fields.

How can I prevent this unwanted behavior also in Google Chrome, Opera, Edge and Safari?

Remark: If the focus is on an input field, Ctrl+A should still select the text of the current input field.

And here's my code:

<html>
  <head>
    <style type = "text/css">
      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>
Solution

  • 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>

    You can notice that when the focus is not on input and you press the CTRL + A then nothing happen but if the focus is on the input and you press the CTRL + A then it will select all text of that input control.

    I have tested this code with the MS Edge legacy, MS Edge (Chromium), Google Chrome, IE 11, and Firefox browsers. The code is working as per your requirement.

    Reference:

    Disable text selection in browser