Guide
Comment utiliser Text Interaction dans Capacitor
Tester sur l'appareil
Téléchargez l'application Capgo, puis scannez le QR code.
Désactivez la sélection de texte et la loupe dans les apps Capacitor iOS
@capgo/capacitor-textinteraction permet de basculer l'interaction textuelle pour la Capacitor WebView sur iOS en un seul appel. Lorsqu'elle est désactivée, l'appui long ne sélectionne plus le texte, n'affiche plus le menu de copie et ne déclenche plus la loupe réintroduite par iOS 15. Votre application web ne ressemble plus à une simple page web dans une coquille native.
En coulisses, le plugin configure WKPreferences.isTextInteractionEnabled sur l'application WKWebView. Il ne modifie rien d'autre.
Quand l'utiliser
- Jeux, bornes et apps de dessin où les gestes d'appui long et de glissement ne doivent jamais sélectionner de texte.
- Menus d'appui long personnalisés qui entrent en conflit avec les poignées de sélection et le menu natifs.
- Lecteurs média, cartes et carrousels où un balayage lent déclenche accidentellement la loupe.
- Une UI de type application où les labels et boutons sélectionnables cassent l'aspect natif.
Gardez l'interaction textuelle activée pour les écrans où les utilisateurs lisent du contenu long qu'ils pourraient vouloir copier, ou lorsqu'ils remplissent des formulaires.
Installer
bun add @capgo/capacitor-textinteraction
bunx cap sync
Non Info.plist clés, permissions ou capacitor.config.ts saisies sont nécessaires.
| Version du plugin | version Capacitor | Maintenu |
|---|---|---|
| v8.x | v8.x | Oui |
| v7.x | v7.x | À la demande |
| v6.x et versions antérieures | v6.x et versions antérieures | Non |
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');
}
Toujours passer enabled explicitement. Le côté natif traite une valeur manquante comme false.
La réactiver avant que l'utilisateur ne tape
Tant que l'interaction textuelle est désactivée, <input>, <textarea> et contenteditable les éléments cessent d'accepter la saisie. Réactivez-le pour tout écran contenant un formulaire, puis désactivez-l’à nouveau quand l'utilisateur quitte l'écran.
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);
Avec un routeur, appelez setTextInteraction(true) dans le hook d'entrée des routes qui contiennent des inputs (par exemple Vue Router beforeEnter, un React useEffect, ou Angular ionViewWillEnter) setTextInteraction(false) lorsque vous les quittez.
Plugin vs CSS
You can hide most selection with CSS:
body {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input,
textarea,
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
Le CSS fonctionne par élément, donc tout ce que vous oubliez reste sélectionnable, et cela ne change pas la façon dont la WebView gère l'appui long. Le plugin agit au niveau de la WebView : un seul appel couvre tous les écrans, y compris la loupe. De nombreuses apps utilisent les deux : le plugin pour les écrans de type application et le CSS pour un contrôle précis dans les écrans où l'interaction textuelle reste active.
Référence API
toggle(options)
toggle(options: { enabled: boolean }): Promise<{ success: boolean }>
Active ou désactive l'interaction textuelle pour la WebView Capacitor.
enabled:truerestaure la sélection, le menu contextuel et la loupe.falseles désactive.success:truelorsque la modification a été appliquée (iOS 14.5+ avec une WebView disponible).falsesur Android et lorsqu'aucune WebView n'est disponible.
getPluginVersion()
getPluginVersion(): Promise<{ version: string }>
Retourne la version du plugin natif. Retourne web dans le navigateur.
Comportement par plateforme
| Plateforme | Comportement |
|---|---|
| iOS 14.5+ | Définit isTextInteractionEnabled sur le WKWebView. S'applique à toutes les pages jusqu'à la prochaine bascule. |
| Android | Aucune opération. Résout { success: false }. Utilisez le CSS si vous devez limiter la sélection. |
| Le Web | toggle renvoie une erreur d'implémentation. Protégez les appels avec Capacitor.getPlatform(). |
Troubleshooting
- Les champs de saisie ne fonctionnent plus. L'interaction textuelle est toujours désactivée. Appelez
toggle({ enabled: true })avant l'affichage du formulaire. - Aucun changement sur Android. Attendu. Le plugin ne supporte que iOS.
TextInteraction.toggle is not available on web. L'appel a été exécuté dans le navigateur ou lors du développement sur un navigateur de bureau. Enveloppez-le dans une vérification de plateforme.- La sélection est récupérée après le redémarrage de l'app. Chaque lancement crée une nouvelle WebView avec l'interaction textuelle activée. Appelez
toggle({ enabled: false })au démarrage.
Plugins associés
- Écran de confidentialité masque le contenu de l'app dans le sélecteur d'app iOS et bloque les captures d'écran sur Android.
- Indicateur d'accueil masque l'indicateur d'accueil iOS pour les écrans immersifs.
- Orientation de l'écran verrouille et lit l'orientation de l'écran.
- Tout parcourir Capacitor plugins par Capgo.
Déployez vos changements sans passer par la revue de l'App Store
L'activation de l'interaction textuelle se fait en JavaScript. Une fois le plugin intégré à votre build natif, vous pouvez définir où et quand il s'exécute avec un Capgo live update au lieu d'attendre la revue de l'App Store.
Référence complète
- Docs : Documentation du plugin Text Interaction
- Démarrage rapide : Guide d'installation et API
- Source : Capgo/capacitor-textinteraction sur GitHub