在Mobile Safari / Webkit的触摸屏上禁用文本高亮放大镜

我的iPhone网站上有一些没有任何文字的元素,但要求用户点击并按住它们(DIV)。 这会导致文本高亮显示/编辑循环/光标显示,这真的让人分心。

我知道有一个CSS规则,用于删除在点击元素时显示的黑框。 有没有这样的事情来禁用文本放大镜?

刚刚得到了开发人员中心帮助台的回复。 我需要添加这个CSS规则:

-webkit-user-select: none; 

使用这个CSS代码

 -webkit-touch-callout: none; -webkit-user-select: none; /* Disable selection/copy in UIWebView */ 

这对保护您不想复制或保存的内容(如图像)也很有用:

 #yourdiv img {-webkit-touch-callout: none; } 

我自己试了一下,发现了这一点。 首先你必须把这个规则添加到封闭的元素中:

 -webkit-user-select: none; 

但是,iPhone本身还不够。 事实certificate,放大镜仍然可以出现,因为,例如,父母的元素会接受select,或者只是因为它的感觉。

然而,我发现了一些很酷的东西 – 如果你的元素为元素添加了一个touchendclick处理程序,那么Apple的Safari最终会避免令人讨厌的代码path,导致放大镜出现,可能意识到这个元素是为了一些UI交互,而不是select文字。 同样真棒的说明,如果你在靠近屏幕顶部的元素上这样做,它也将取消在横向模式下导航的外观! 不知道如何取消导航的外观,当点击底部的元素,没有人有一个解决scheme的那个?

JS解决了这个问题:

 document.getElementsByTagName("body")[0].addEventListener("touchstart", function(e) { e.returnValue = false }); 

似乎绕过任何操作系统在那里接触。

将此添加到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' */}