问如何在焦点不在输入字段时禁止Ctrl+A选择输入字段的文本
EN

Stack Overflow用户

提问于 2020-06-21 13:01:06

回答 1查看 886关注 0票数 0

下面的代码阻止Ctrl+A选择整个HTML页面，而鼠标则无法选择任何内容，这是很棒的。

但不幸的是，Ctrl+A并不能按需要在每个浏览器中的某些元素上工作：

当焦点集中在链接、选择或按钮上时:如果焦点集中在输入字段，则不应该是selected

Ctrl+A :当前输入字段中的文本应该选择

有了Mozilla和Internet，一切都能按需要工作。太棒了！

但谷歌Chrome、Opera、Edge和Safari的工作方式并不尽如人意。当焦点放在链接、选择或按钮上时，Ctrl+A将选择所有输入字段的文本。

在谷歌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

Stack Overflow用户

回答已采纳

发布于 2020-06-21 21:26:11

我建议在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>