防止在 iOS 上突出显示文本答案

【问题标题】：Prevent Highlight of Text on iOS防止在 iOS 上突出显示文本
【发布时间】：2021-03-06 19:17:16
【问题描述】：

我有一个使用 HTML canvas 的 Web 应用程序，它通过使用 JavaScript 鼠标和触摸事件进行交互。最近，如果用户长按画布，iOS Safari 已经开始在画布上放置文本高亮标注。由于画布旨在在 iOS 设备上进行交互，因此出现的这种标注会破坏用户体验。

即使浏览器确实支持画布，高亮显示在画布的后备文本（画布元素的内容）上，所以文本不应该出现。文本不可见，但从标注中复制会将画布后备文本添加到剪贴板，确认这是浏览器正在选择的内容。但是，从画布元素中删除文本并不会阻止标注的出现；它只是突出显示并允许复制空字符串。

尽管我在画布上使用了这些 CSS 属性，但问题仍然存在：

    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

问题演示：https://codepen.io/KingDragonhoff/pen/vYKoajK

出现的标注图片：https://imgur.com/a/dCm6uPC

如何阻止 iOS Safari 在画布元素上显示高亮标注？

【问题讨论】：

标签： css safari html5-canvas

【解决方案1】：

将canvas放到div中可以解决你的问题。

.container {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#canvas {
    background-color: firebrick;
}

html {background-color: #3d4359;}

<div class='container'>
    <canvas id="canvas" width="400" height="400">This is the canvas fallback text.</canvas>
</div>

尝试在 safari 上查看此 codepen：https://codepen.io/taimanh229/pen/YzGYLwQ（在 iphone 7 ios 13 上通过）

【讨论】：

这会导致标注出现在画布下方的某些文本上，而不是阻止标注出现。它仍然覆盖应用程序中的画布并且具有破坏性。我希望在长按画布元素时完全阻止标注出现。参见示例：codepen.io/KingDragonhoff/pen/vYXpwxv
我尝试使用 js 来阻止画布上的 selectstart 和 dragstart 事件，但失败了。
尽管没有接受，但我还是将赏金奖励给了你，因为虽然这不能完全解决问题，但它很有帮助，感谢你的回答。

【解决方案2】：

您必须创建一个'touchstart' 事件侦听器并在其上调用e.preventDefault()。

即使您还使用指针事件而不是触摸事件，也必须这样做。取消那些指针事件是不够的，即使它们是e.pointerType === 'touch'！

canvas.addEventListener('touchstart', function(e) { e.preventDefault(); });

【讨论】：

感谢您的回答，但我实际上不再有描述的问题。自从我发布这个问题以来，Safari 似乎已被修补以修复它。

【解决方案3】：

这里的问题似乎是 iOS 设备假设页面上可以选择某些内容。如果canvas 是页面上唯一应该出现的元素，您可以直接将样式应用于html 元素。

在这种情况下，将您的样式添加到 html 选择器应该适合您。

html {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

虽然，如果页面上还有其他内容，您可能也不得不忍受那些无法选择的内容。

【讨论】：