Disable text selection and the magnifier lens in Capacitor iOS apps
@capgo/capacitor-textinteraction 让您只需一次调用即可在 iOS 中的 Capacitor WebView 上开启或关闭文本交互。当它关闭时，长按文本不会再选择它，显示复制弹出窗口或唤起 iOS 15 重新引入的放大镜镜头。您的 Web 应用将不再像一个 Web 页面一样在原生壳中运行。
在背后，该插件设置 WKPreferences.isTextInteractionEnabled 将属性设置为 WKWebView。它不会改变任何其他内容。
何时使用它
- 游戏、自助机和绘图应用 不应选择文本的长按和拖拽手势
- 自定义长按菜单 与原生选择手柄和弹出窗口冲突
- 媒体播放器、地图和幻灯片 慢速滑动意外触发放大镜镜头
- 品牌化的、类似应用的界面 可选择的标签和按钮会破坏原生感
在屏幕上保留文本交互功能，用户可能需要复制长内容或填写表单
安装
bun add @capgo/capacitor-textinteraction
bunx cap sync
否 Info.plist 不需要任何密钥、权限或 capacitor.config.ts 条目
| 插件版本 | Capacitor版本 | 维护 |
|---|---|---|
| v8.x | v8.x | 是 |
| v7.x | v7.x | 按需 |
| v6.x及更早版本 | v6.x及更早版本 | 否 |
在应用启动时禁用文本交互
import { Capacitor } from '@capacitor/core';
import { TextInteraction } from '@capgo/capacitor-textinteraction';
if (Capacitor.getPlatform() === 'ios') {
const { success } = await TextInteraction.toggle({ enabled: false });
if (!success) console.warn('Text interaction could not be changed on this device');
}
始终传递。 原生侧会将缺失的值视为 enabled 重新启用它在用户输入之前 false.
在文本交互关闭时,
在文本交互关闭时， <input>, <textarea> 和 contenteditable 元素不再接收输入。为任何包含表单的屏幕打开，然后在用户离开时关闭。
import { Capacitor } from '@capacitor/core';
import { TextInteraction } from '@capgo/capacitor-textinteraction';
const isIos = Capacitor.getPlatform() === 'ios';
export async function setTextInteraction(enabled: boolean) {
if (!isIos) return false;
const { success } = await TextInteraction.toggle({ enabled });
return success;
}
// Entering a login, search or checkout screen
await setTextInteraction(true);
// Leaving it
await setTextInteraction(false);
使用路由器时，调用 setTextInteraction(true) 在包含输入的路由中（例如 Vue Router beforeEnter，一个 React useEffect，或 Angular ionViewWillEnter）和 setTextInteraction(false) 离开它们时。
插件与 CSS
您可以使用 CSS 隐藏大部分选择：
body {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input,
textarea,
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
CSS 是基于元素的，因此您忘记的任何内容仍然可选择，且不会影响 WebView 本身处理长按的方式。该插件在 WebView 级别工作：一次调用可以覆盖所有屏幕，包括放大镜镜头。许多应用程序都使用两者：插件用于类似应用程序的屏幕，CSS 用于在文本交互保持在屏幕内部时进行精细控制的屏幕。
API参考
toggle(options)
toggle(options: { enabled: boolean }): Promise<{ success: boolean }>
启用或禁用Capacitor WebView的文本交互功能。
enabled:true恢复选择、弹出提示和放大镜镜头。false禁用它们。success:true当更改被应用于iOS 14.5+时（有WebView可用）。false在Android上和没有WebView可用时。
getPluginVersion()
getPluginVersion(): Promise<{ version: string }>
返回原生插件版本。返回 web 浏览器中的
平台行为
| 平台 | 行为 |
|---|---|
| iOS 14.5+ | 设置 isTextInteractionEnabled 在 Android 上 WKWebView. 适用于所有页面，直到再次切换。 |
| Android | 无效。解决 { success: false }. 如果您需要限制选择，请使用 CSS。 |
| Web | toggle 抛出未实现的错误。使用 Capacitor.getPlatform(). |
故障排除
- 上下文:支持/高级支持页面或底部支持部分。角色:部分或页面标题。见:页面 support-policy.astro。消息键 `support_policy_troubleshooting_title` (支持政策故障排除标题)。 输入停止工作。
toggle({ enabled: true })文本交互仍然被禁用。请在表单显示之前调用 - Android 上没有任何变化。 预期结果。该插件仅支持iOS。
TextInteraction.toggle is not available on web. 该调用在浏览器中或桌面浏览器中运行。将其包装在平台检查中。- 选择在重启应用后恢复。 每次启动都创建一个新的WebView，文本交互功能启用。请在
toggle({ enabled: false })启动时调用。
相关插件
- 隐私屏幕 在iOS应用切换器中隐藏应用内容，并阻止Android截屏。
- 主页指示器 隐藏iOS主页指示器以实现沉浸式屏幕。
- 屏幕方向 锁定和读取屏幕方向。
- 浏览所有 Capacitor 由 Capgo 提供.
无需 App Store 审核即可发布更新
切换文本交互是使用 JavaScript。 一旦插件添加到您的原生构建中，您就可以使用 Capgo live update 而不是等待 App Store 审核。
完整参考
- 文档： 文本交互插件文档
- 开始使用： 安装和API指南
- 源码： Capacitor-capacitor-textinteraction 在GitHub