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

【问题标题】：How to disable Ctrl+A from selecting text of input fields when focus is not on an input field当焦点不在输入字段上时，如何禁用 Ctrl+A 选择输入字段的文本
【发布时间】：2020-06-22 22:39:46
【问题描述】：

下面的代码可以防止 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>

【问题讨论】：

标签： html google-chrome safari microsoft-edge opera

【解决方案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 则它将选择该输入控件的所有文本。

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

参考：

Disable text selection in browser

【讨论】：

这太棒了！它适用于所有浏览器。太好了，非常感谢您的帮助。我真的很感激。