Anleitung
Text Interaction in Capacitor nutzen
Auf dem Gerät testen
Lade die Capgo App herunter und scanne den QR code.
Deaktiviere die Textauswahl und die Lupe in Capacitor iOS-Apps
@capgo/capacitor-textinteraction Ermöglicht es mit einem einzigen Aufruf, die Textinteraktion für die Capacitor WebView unter iOS ein- oder auszuschalten. Wenn sie deaktiviert ist, führt ein langes Drücken auf Text nicht mehr zur Auswahl, zeigt das Kopier-Menü an oder öffnet die Lupe, die mit iOS 15 eingeführt wurde. Deine Web-App fühlt sich dadurch nicht mehr wie eine Webseite in einem Native Shell an.
Im Hintergrund setzt das Plugin WKPreferences.isTextInteractionEnabled auf der App- WKWebView. Es ändert sonst nichts.
Anwendungsfälle
- Games, Kiosks und Zeichen-Apps bei denen Long-Press- und Drag-Gesten niemals Text auswählen sollen.
- Eigene Long-Press-Menüs die mit den nativen Auswahlgriffen und Callouts kollidieren.
- Media Player, Maps und Carousels bei denen ein langsamer Swipe versehentlich die Lupe auslöst.
- Markenorientiertes App-UI wo auswählbare Labels und Buttons das native Feeling stören.
Aktivieren Sie die Textinteraktion für Bildschirme, auf denen Nutzer längere Inhalte lesen und kopieren möchten oder auf denen sie Formulare ausfüllen.
Installieren
bun add @capgo/capacitor-textinteraction
bunx cap sync
Nein Info.plist Keys, Berechtigungen oder capacitor.config.ts Eingaben benötigt werden.
| Plugin-Version | Capacitor Version | Wartung läuft |
|---|---|---|
| v8.x | v8.x | Ja |
| v7.x | v7.x | On-demand |
| v6.x und älter | v6.x und älter | Nein |
Textinteraktion beim App-Start deaktivieren
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');
}
Immer explizit enabled übergeben. Die native Seite behandelt fehlende Werte als false.
Vor der Eingabe wieder aktivieren
Solange die Textinteraktion deaktiviert ist, <input>, <textarea> und contenteditable Elemente akzeptieren keine Eingaben mehr. Aktiviere es für alle Screens mit Formularen und deaktiviere es wieder, sobald der User den Screen verlässt.
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);
Bei Verwendung eines Routers rufst du setTextInteraction(true) im Enter-Hook der Routen mit Inputs auf (z. B. Vue Router beforeEnter, ein React useEffect, oder Angular ionViewWillEnter) und setTextInteraction(false) beim Verlassen der Routen auf.
Plugin vs. CSS
Die meisten Selektionen lassen sich per CSS verbergen:
body {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input,
textarea,
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
CSS wirkt pro Element; vergessene Teile bleiben also wählbar, und es ändert nichts am Long-Press-Verhalten der WebView selbst. Das Plugin arbeitet auf WebView-Ebene: Ein Aufruf deckt alle Screens ab, inklusive der Lupe. Viele Apps nutzen beides: das Plugin für App-typische Screens und CSS für die Feinsteuerung in Screens, in denen die Textinteraktion aktiv bleibt.
API-Referenz
toggle(options)
toggle(options: { enabled: boolean }): Promise<{ success: boolean }>
Aktiviert oder deaktiviert die Textinteraktion für die Capacitor WebView.
enabled:truestellt die Auswahl, das Callout-Menü und die Lupe wieder her.falsedeaktiviert diese.success:trueals die Änderung angewendet wurde (iOS 14.5+ mit verfügbarer WebView).falseauf Android und wenn keine WebView verfügbar ist.
getPluginVersion()
getPluginVersion(): Promise<{ version: string }>
Gibt die native Plugin-Version zurück. Gibt web im Browser zurück.
Plattformverhalten
| Plattform | Verhalten |
|---|---|
| iOS 14.5+ | Setzt isTextInteractionEnabled auf dem WKWebView. Gilt für alle Seiten, bis es erneut umgeschaltet wird. |
| Android | Keine Aktion. Wird aufgelöst { success: false }. Nutze CSS, wenn du die Auswahl einschränken willst. |
| Web | toggle wirft einen Fehler, da nicht implementiert. Schütze Aufrufe mit Capacitor.getPlatform(). |
Fehlerbehebung
- Inputs funktionieren nicht mehr. Textinteraktion ist weiterhin deaktiviert. Rufe
toggle({ enabled: true })auf, bevor das Formular angezeigt wird. - Auf Android ändert sich nichts. Erwartet. Das Plugin wird nur für iOS unterstützt.
TextInteraction.toggle is not available on web. Der Aufruf erfolgte im Browser oder während der Entwicklung in einem Desktop-Browser. Umschließe ihn mit einem Plattform-Check.- Die Auswahl wird nach einem App-Neustart wiederhergestellt. Jeder Start erstellt eine neue WebView mit aktivierter Textinteraktion. Rufe dies
toggle({ enabled: false })beim App-Start auf.
Verwandte Plugins
- Privacy Screen verdeckt App-Inhalte im iOS App Switcher und blockiert Android-Screenshots.
- Home-Indikator blendet den iOS Home Indicator für immersive Bildschirme aus.
- Bildschirmausrichtung sperrt und liest die Bildschirmorientierung aus.
- Alle durchsuchen Capacitor Plugins von Capgo.
Änderungen ohne App Store Review deployen
Das Umschalten der Textinteraktion erfolgt via JavaScript. Sobald das Plugin in deinem Native Build ist, kannst du mit einem Capgo live update steuern, anstatt auf das App Store Review zu warten.
Vollständige Referenz
- Docs: Text Interaction Plugin Dokumentation
- Erste Schritte: Installations- und API Guide
- Source: Cap-go/capacitor-textinteraction auf GitHub