Interacción de texto plugin de Capacitor

Deshabilitar la selección de texto y el lente de aumento en aplicaciones de iOS Capacitor

@capgo/capacitor-textinteraction te da una llamada para activar o desactivar la interacción de texto en el WebView de iOS Capacitor. Cuando está desactivado, el texto ya no se selecciona al hacer clic largo, no muestra el llamado de copia ni activa el lente de aumento que iOS 15 reintrodujo. Tu aplicación web deja de sentirse como una página web dentro de una caja nativa.

Bajo la capota, el plugin establece WKPreferences.isTextInteractionEnabled en la aplicación's WKWebView. No cambia nada más.

Cuándo usarlo

• Juegos, kioscos y aplicaciones de dibujo donde las gesturas de clic largo y arrastrar nunca deben seleccionar texto.
• Menús de presionar durante mucho tiempo personalizados que se chocan con los controles de selección nativos y el llamado.
• Reproductores de medios, mapas y carousels dónde un deslizamiento lento accidentalmente activa el lupa.
• Interfaz de usuario de aplicación personalizada dónde los etiquetas y botones seleccionables rompen el sentir nativo.

Mantener la interacción de texto habilitada para pantallas donde los usuarios lean contenido largo que pueden querer copiar, o donde llenen formularios.

Instalar

bun add @capgo/capacitor-textinteraction
bunx cap sync

No Info.plist no se necesitan claves, permisos o capacitor.config.ts Se necesitan entradas.

Disable text interaction on app start

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');
}

Siempre pasa enabled explicitamente. El lado nativo trata un valor faltante como false.

Reactivarlo antes de que los usuarios escriban

Mientras la interacción de texto está desactivada, <input>, <textarea> y contenteditable Los elementos dejan de aceptar entrada. Vuelve a activarlo en cualquier pantalla con un formulario, luego vuelve a desactivarlo cuando el usuario se vaya.

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, llamar setTextInteraction(true) en el hook de entrada de rutas que contienen inputs (por ejemplo, Vue Router) beforeEnter,a React useEffect, un React ionViewWillEnter, o Angular setTextInteraction(false) ) y cuando se dejen de usarlos.

Plugin vs CSS

Tú puedes ocultar la mayoría 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;
}

CSS funciona por elemento, por lo que cualquier cosa que olvides sigue siendo seleccionable, y no cambia cómo el navegador WebView maneja el largo presionado. El plugin funciona a nivel de WebView: una llamada cubre toda la pantalla, incluido el lente de aumento. Muchas aplicaciones utilizan ambos: el plugin para pantallas de tipo aplicación y CSS para un control fino dentro de pantallas donde la interacción de texto permanece.

API referencia

toggle(options)

toggle(options: { enabled: boolean }): Promise<{ success: boolean }>

Activa o desactiva la interacción de texto para el WebView Capacitor.

• enabled: true restaura la selección, el llamado y el lente de aumento. false los desactiva.
• success: true cuando se aplicó el cambio (iOS 14.5+ con un WebView disponible). false en Android y cuando no está disponible el WebView.

getPluginVersion()

getPluginVersion(): Promise<{ version: string }>

Devuelve la versión nativa del plugin. Devuelve web en el navegador.

Comportamiento de la plataforma

Ayuda con problemas

• Los campos dejaron de funcionar. La interacción de texto sigue deshabilitada. Llame toggle({ enabled: true }) antes de mostrar el formulario.
• Nothing cambia en Android. Esperado. El plugin solo admite 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 vuelve después de reiniciar la aplicación. Cada lanzamiento crea una nueva WebView con la interacción de texto habilitada. Llame toggle({ enabled: false }) durante el arranque.

Plugins relacionados

• Pantalla de privacidad hides app content in the iOS app switcher and blocks Android screenshots.
• Indicador de inicio oculta el indicador de inicio de iOS para pantallas inmersivas.
• Orientación de pantalla bloquea y lee la orientación de pantalla.
• Explora todos Capacitor plugins por Capgo.

Envía el cambio sin revisión de la tienda App Store

Activar la interacción de texto es JavaScript. Una vez que el plugin está en tu compilación nativa, puedes cambiar dónde y cuándo se ejecuta con un Capgo live update en lugar de esperar a la revisión de la tienda App Store.

Referencia completa

• Docs: Documentación del plugin de interacción de texto
• Empezar a trabajar: Guía de instalación y API
• Fuente: Cap-go/capacitor-textinteraction en GitHub