Как отключить Ctrl+A для выбора текста полей ввода, когда фокус не находится на поле ввода

Приведенный ниже код не позволяет Ctrl+A выбрать всю HTML-страницу, а мышь не выделяет ничего, и это здорово.

Но, к сожалению, Ctrl+A не работает с некоторыми элементами в каждом браузере так, как хотелось бы:

  • Ctrl+A, когда фокус находится на ссылке, выделении или кнопке: ничего не должно быть выделено
  • Ctrl+A, когда фокус находится на поле ввода: текст в текущем поле ввода должен быть выделен.

С Mozilla Firefox и Internet Explorer все работает как надо. Здорово!

Но с Google Chrome, Opera, Edge и Safari это не работает должным образом. Когда фокус находится на ссылке, выделении или кнопке, Ctrl+A выделяет текст всех полей ввода.

Как я могу предотвратить это нежелательное поведение в Google Chrome, Opera, Edge и Safari?

Примечание. Если фокус находится в поле ввода, сочетание клавиш Ctrl+A должно по-прежнему выделять текст текущего поля ввода.

И вот мой код:

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

google-chrome html safari microsoft-edge opera
person Seeky    schedule 21.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я предлагаю попробовать добавить код ниже в свой 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;
}

Модифицированный пример:

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

Вы можете заметить, что когда фокус находится не на вводе и вы нажимаете CTRL + A, ничего не происходит, но если фокус находится на вводе и вы нажимаете CTRL + A, тогда будет выбран весь текст этого элемента управления вводом.

Я протестировал этот код с браузерами MS Edge Legacy, MS Edge (Chromium), Google Chrome, IE 11 и Firefox. Код работает в соответствии с вашим требованием.

Ссылка:

Отключить выделение текста в браузере

person Deepak-MSFT    schedule 22.06.2020
comment
Это фантастика! Он работает во всех браузерах. Отлично, большое спасибо за вашу помощь. Я очень ценю это. - person Seeky; 22.06.2020