Interaction de texte plugin Capacitor

Empêchez la sélection de texte et la loupe dans les applications iOS Capacitor

@capgo/capacitor-textinteraction Cela vous donne un appel pour activer ou désactiver l'interaction de texte pour la vue Web Capacitor sur iOS. Lorsqu'il est désactivé, la sélection de texte en appuyant longuement ne sélectionne plus le texte, ne montre pas l'appel à la copie ou n'ouvre pas la loupe que iOS 15 a réintroduit. Votre application web cesse de ressembler à une page web à l'intérieur d'un shell natif.

En dessous de la carrosserie, le plugin définit WKPreferences.isTextInteractionEnabled sur l'application's WKWebView. Il ne change rien d'autre.

Quand l'utiliser

• Jeux, kiosques et applications de dessin N'importe quelle pression prolongée et glisser-déposer ne doit pas sélectionner du texte.
• Les menus de long-press personnalisés qui entrent en conflit avec les manettes de sélection natives et l'appel.
• Media players, maps and carousels où un swipe lent déclenche par hasard la loupe.
• Interface utilisateur personnalisée, comme une application où les étiquettes et les boutons sélectionnables détruisent le sentiment natif.

Conservez l'interaction texte activée sur les écrans où les utilisateurs lisent du contenu long qu'ils pourraient vouloir copier, ou où ils remplissent des formulaires.

Installer

bun add @capgo/capacitor-textinteraction
bunx cap sync

Non Info.plist Aucune clé, aucune autorisation ou capacitor.config.ts aucun enregistrement n'est nécessaire.

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

Passer toujours enabled explicitement. Le côté natif considère une valeur manquante comme false.

Réactivez-l’avant que les utilisateurs ne tapent

Alors que l'interaction texte est désactivée, <input>, <textarea> et contenteditable Les éléments cesse de recevoir des entrées. Activez-l’à nouveau pour tout écran contenant un formulaire, puis éteignez-le lorsque l'utilisateur quitte.

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 crochet d'entrée des routes contenant des entrées (par exemple Vue Router beforeEnter, un React useEffect, ou Angular ionViewWillEnter) et setTextInteraction(false) lorsqu'ils quittent.

Plugin vs CSS

Vous pouvez cacher la plupart des sélections avec CSS :

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

CSS fonctionne par élément, donc tout ce que vous oubliez reste sélectionnable, et cela ne change pas la façon dont le WebView gère les longs appuis. Le plugin fonctionne au niveau du WebView : une seule mise en œuvre couvre tout l'écran, y compris le loupeur.

API référence

toggle(options)

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

Active ou désactive l'interaction avec le texte pour la vue Capacitor.

• enabled: true restaure la sélection, l'appel à l'attention et le loupe. false les désactive.
• success: true lorsque la modification a été appliquée (iOS 14.5+ avec une vue disponible). false sur Android et lorsque aucune vue n'est disponible.

getPluginVersion()

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

Renvoie la version native du plugin. Renvoie web Comportement de la plateforme

Comportement de la plateforme

Troubleshooting

• Les entrées ne fonctionnent plus. Les entrées ne fonctionnent plus. toggle({ enabled: true }) avant que le formulaire soit affiché.
• avant de montrer le formulaire. Attendu. Le plugin ne prend en charge que l'iOS.
• TextInteraction.toggle is not available on web. La fonctionnalité a été exécutée dans le navigateur ou en développement dans un navigateur de bureau. Vérifiez la plateforme avant d'y accéder.
• La sélection est rétablie après redémarrage de l'application. Chaque lancement crée une nouvelle vue Web avec l'interaction avec le texte activée. Appelez-le toggle({ enabled: false }) dans le démarrage.

Plugins connexes

• Écran de confidentialité hides app content in the iOS app switcher and blocks Android screenshots.
• Indicateur de domicile masque l'indicateur de domicile iOS pour les écrans immergés.
• Orientation de l'écran bloque et lit l'orientation de l'écran.
• Explorer tous Capacitor plugins par Capgo.

Envoyez la mise à jour sans passer par la revue de l'App Store

Une fois le plugin intégré à votre build natif, vous pouvez modifier 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 d'interaction texte
• Démarrage rapide : Guide d'installation et de API
• Source : Cap-go/capacitor-interaction sur GitHub