当焦点不在输入字段上时如何禁用 Ctrl+A 选择输入字段的文本

Question

下面的代码阻止 Ctrl+A select 访问整个 HTML 页面和鼠标 select 访问任何内容，这很棒。

但不幸的是，Ctrl+A 并不适用于每个浏览器中的某些元素：

Ctrl+A 当焦点在 link、select 离子或按钮上时：不应 selected
Ctrl+A 当焦点位于输入字段时：当前输入字段中的文本应 selected

使用 Mozilla Firefox 和 Internet Explorer 一切正常。太棒了！

但是对于 Google Chrome，Opera、Edge 和 Safari 无法正常工作。当焦点位于 link、select 离子或按钮上时，Ctrl+A selects 所有输入字段的文本。

如何在 Google Chrome、Opera、Edge 和 Safari 中防止这种不需要的行为？

备注：如果焦点在输入框，Ctrl+A应该还是select当前输入框的文本。

这是我的代码：

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

Answer 1

我建议尝试在您的 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 那么它将 select all该输入控件的文本。

我已经使用 MS Edge legacy、MS Edge (Chromium)、Google Chrome、IE 11 和 Firefox 浏览器测试了此代码。代码正在按照您的要求工作。

参考：

Disable text selection in browser

当焦点不在输入字段上时如何禁用 Ctrl+A 选择输入字段的文本

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

html

safari

opera

google-chrome

microsoft-edge