我的 iPhone 网站中有一些元素没有任何文本，但需要用户单击并按住它们（DIV）。这会导致文本突出显示/编辑循环/光标出现，这真的很让人分心。
我知道有一条 CSS 规则可以删除在可点击元素被触摸时出现的黑框。有没有类似的东西可以禁用文本放大镜？
问问题
28395 次
7 回答
50
刚收到开发者中心服务台的回复。我需要添加这个 CSS 规则：
-webkit-user-select: none;
于 2009-05-29T00:00:20.287 回答
7
将此添加到 CSS
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}
于 2017-02-03T05:15:16.943 回答
6
使用这些 CSS 规则：
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
于 2014-11-06T13:45:55.900 回答
5
这对于保护您不想复制或保存的内容（例如图像）也很有用：
#yourdiv img {-webkit-touch-callout: none; }
于 2009-12-08T06:40:24.307 回答
5
这在 JS 中为我解决了这个问题：
document.getElementsByTagName("body")[0].addEventListener("touchstart",
function(e) { e.returnValue = false });
似乎绕过了操作系统在那里捕捉触摸的任何东西。
于 2016-03-07T23:51:54.400 回答
4
我在自己尝试时发现了这一点。首先，您必须将此规则添加到封闭元素：
-webkit-user-select: none;
但这在 iPhone 上是不够的。事实证明，放大镜仍然可以出现，因为例如，父元素会接受选择，或者只是因为感觉像它。
然而，我随后发现了一些很酷的东西——如果你的元素向一个元素添加了一个touchend和click处理程序，那么 Apple 的 Safari 最终避免了导致放大镜出现的烦人的代码路径，可能意识到这个元素是为了一些 UI 交互，而不是选择文本。同样令人敬畏的是，如果您在屏幕顶部附近的元素上执行此操作，它还将取消横向模式下导航的外观！但是不确定如何在单击底部的元素时取消导航的外观，有没有人有解决方案？
于 2014-09-10T17:40:28.250 回答
1
在 IOS 15.2-webkit-user-select: none;上解决了这个问题，但只是部分解决了。
长按不再显示放大镜。但是，如果您双击并按住，它仍然会神奇地出现。
除了event.preventDefaulttouchstart 之外，仍然没有 100% 可靠的方法。但这也阻止了底层操作，因此带有长按工具提示的按钮之类的东西会中断。因此，它并不总是一种选择......
于 2021-12-21T01:08:53.953 回答