如何在焦点不在输入字段时禁止Ctrl+A选择输入字段的文本
如何在焦点不在输入字段时禁止Ctrl+A选择输入字段的文本
提问于 2020-06-21 21:01:06
下面的代码阻止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>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-22 05: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>
您可以注意到，当焦点不是在输入上，然后按下CTRL +A，那么什么都不会发生，但是如果焦点是在输入上，然后按下CTRL +A，那么它将选择该输入控件的所有文本。
我已经用MS遗留、MS (Chromium)、Google、IE11和Firefox浏览器测试了这段代码。代码按照您的要求工作。
参考资料：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62504375
复制相关文章
相似问题
腾讯云开发者
