如何在 Safari 浏览器中禁用实时文本功能，提升用户体验

2024-03-27 20:15:23

在 Safari 中禁用实时文本功能，提升用户体验

导言

实时文本功能在 Safari 浏览器中提供了便利，可以轻松从图像中提取文字信息。然而，对于某些网站设计，它可能会产生不必要的干扰，例如徽标上的导航链接被意外触发。本文将探讨如何使用 Vue.js、HTML 或 CSS 在你的网站上禁用 Safari 的实时文本功能，从而优化用户体验。

问题

假设你的网站有一个导航栏，其中包含一个徽标。徽标是一个 .svg 文件，它由两行文字组成。当点击徽标时，用户会导航到主页。在 Safari 浏览器中，实时文本功能会识别徽标中的文本，并添加一个图层，该图层允许用户将鼠标悬停在 "world.com" 上并被重定向到该网站。这会破坏预期的用户体验，因为用户可能希望点击徽标返回主页。

解决方案

使用 CSS

在你的 CSS 文件中添加以下规则：

.disable-live-text {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

然后，将该类应用于徽标图像：

<img class="disable-live-text" @click="goToHome()" src="/imgs/logo-RCN-black.svg">

使用 HTML

在你的 HTML 文件中，添加以下属性到徽标图像：

<img @click="goToHome()" src="/imgs/logo-RCN-black.svg" unselectable="on">

使用 Vue.js

在你的 Vue.js 组件中，使用 v-on:touchstart 指令和 preventDefault() 方法来禁用实时文本功能：

<img @click="goToHome()" @touchstart="preventDefault" src="/imgs/logo-RCN-black.svg">

最佳实践

上面列出的所有方法都应该可以有效禁用 Safari 中的实时文本功能。如果你发现仍然存在问题，请尝试同时使用多种方法。

常见问题解答

为什么要禁用 Safari 中的实时文本功能？

实时文本功能可能会干扰某些网站设计，例如导航栏徽标上的导航链接被意外触发，从而导致不佳的用户体验。
这个解决方案只适用于 Vue.js 应用程序吗？

否，本文提供的解决方案适用于任何类型的网站，无论是否使用 Vue.js。
我可以通过其他方式禁用实时文本功能吗？

可以通过 Safari 的设置禁用实时文本功能。转到 "设置" > "通用" > "语言和区域"，然后关闭 "启用实时文本" 选项。
为什么我仍然可以在禁用实时文本功能后选择徽标上的文本？

一些应用程序可能会使用自己的文本选择机制，与 Safari 的实时文本功能无关。请确保你已正确应用了本文中概述的解决方案。
这会影响 Safari 中的其他功能吗？

否，本文中提供的解决方案仅禁用实时文本功能，不会影响 Safari 中的任何其他功能。