Guía
Cómo usar Text Interaction en Capacitor
Desactiva la selección de texto y la lupa en apps Capacitor iOS
@capgo/capacitor-textinteraction te permite con una sola llamada activar o desactivar la interacción de texto en la Capacitor WebView de iOS. Al desactivarla, mantener presionado el texto ya no lo selecciona, no muestra el menú de copiar ni activa la lupa que iOS 15 reintrodujo. Tu web app dejará de sentirse como una página web dentro de un shell nativo.
Internamente, el plugin configura WKPreferences.isTextInteractionEnabled on the app's WKWebView. No cambia nada más.
Cuándo usarlo
- Juegos, kioscos y apps de dibujo donde los gestos de mantener presionado o arrastrar no deben seleccionar texto.
- Menús personalizados al mantener presionado que chocan con los selectores y menús nativos.
- Reproductores, mapas y carruseles donde un deslizamiento lento activa la lupa por accidente.
- Interfaz con estilo de app donde las etiquetas y botones seleccionables rompen la sensación nativa.
Mantén activa la interacción de texto en pantallas donde los usuarios lean contenido largo que deseen copiar o donde deban completar formularios.
Instalar
bun add @capgo/capacitor-textinteraction
bunx cap sync
No Info.plist teclas, permisos o capacitor.config.ts entradas son necesarios.
| Versión del plugin | Versión de Capacitor | Mantenido |
|---|---|---|
| v8.x | v8.x | Sí |
| v7.x | v7.x | Bajo demanda |
| v6.x y anteriores | v6.x y anteriores | No |
Desactivar la interacción de texto al iniciar la app
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');
}
Pásalo siempre enabled de forma explícita. El lado nativo trata el valor ausente como false.
Reactivarlo antes de que el usuario escriba
Mientras la interacción de texto esté desactivada, <input>, <textarea> y contenteditable los elementos dejan de aceptar input. Vuelve a activarlo en cualquier pantalla con un formulario y desactívalo de nuevo cuando el usuario salga.
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);
Con un router, llama a setTextInteraction(true) en el hook enter de las rutas que contengan inputs (por ejemplo, Vue Router beforeEnter, un React useEffect, o Angular ionViewWillEnter) y setTextInteraction(false) al salir de ellas.
Plugin vs CSS
Puedes ocultar la mayor parte de la selección con CSS:
body {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input,
textarea,
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
El CSS se aplica por elemento, así que todo lo que olvides seguirá siendo seleccionable y no cambia cómo el propio WebView gestiona la pulsación larga. El plugin funciona a nivel de WebView: una sola llamada cubre todas las pantallas, incluida la lupa. Muchas apps usan ambos: el plugin para pantallas tipo app y CSS para un control más fino dentro de pantallas donde la interacción con texto sigue activa.
Referencia de API
toggle(options)
toggle(options: { enabled: boolean }): Promise<{ success: boolean }>
Activa o desactiva la interacción de texto en la WebView de Capacitor.
enabled:truerestaura la selección, el menú contextual y la lupa.falselos desactiva.success:truecuando se aplicó el cambio (iOS 14.5+ con WebView disponible).falseen Android y cuando no hay una WebView disponible.
getPluginVersion()
getPluginVersion(): Promise<{ version: string }>
Devuelve la versión del plugin nativo. Devuelve web en el navegador.
Comportamiento de la plataforma
| Plataforma | Comportamiento |
|---|---|
| iOS 14.5+ | Configura isTextInteractionEnabled en el WKWebView. Se aplica a todas las páginas hasta que se desactive. |
| Android | No-op. Resuelve { success: false }. Usa CSS si necesitas limitar la selección. |
| Web | toggle lanza un error de implementación. Protege las llamadas con Capacitor.getPlatform(). |
Solución de problemas
- Los inputs dejaron de funcionar. La interacción de texto sigue desactivada. Llama a
toggle({ enabled: true })antes de mostrar el formulario. - No hay cambios en Android. Es de esperar. El plugin solo es compatible con iOS.
TextInteraction.toggle is not available on web. La llamada se ejecutó en el navegador o durante el desarrollo en un navegador de escritorio. Envuélvela en una comprobación de plataforma.- La selección reaparece tras reiniciar la app. Cada inicio crea una nueva WebView con la interacción de texto habilitada. Llama a
toggle({ enabled: false })durante el arranque.
Plugins relacionados
- Pantalla de privacidad oculta el contenido de la app en el app switcher de iOS y bloquea capturas de pantalla en Android.
- Indicador de inicio oculta el indicador de inicio de iOS para pantallas inmersivas.
- Orientación de pantalla bloquea y lee la orientación de la pantalla.
- Explorar todos Plugins de Capacitor por Capgo.
Lanza cambios sin pasar por la revisión de la App Store
Alternar la interacción de texto es JavaScript. Una vez que el plugin está en tu Native Build, puedes cambiar dónde y cuándo se ejecuta con un Capgo live update en lugar de esperar la revisión de la App Store.
Referencia completa
- Docs: Documentación del plugin Text Interaction
- Primeros pasos: Guía de instalación y API
- Fuente: Cap-go/capacitor-textinteraction en GitHub