Anleitung
Wie man Text Interaction in Capacitor verwendet
Testen auf Gerät
Laden Sie die Capgo-App herunter, dann scannen Sie die QR-code.
Textauswahl und das Vergrößerungslens in Capacitor-Apps für iOS deaktivieren
@capgo/capacitor-textinteraction Gibt Ihnen einen Aufruf, um die Textinteraktion in der Capacitor-WebView auf iOS an- oder auszuschalten. Wenn sie ausgeschaltet ist, wählt das lange Drücken von Text nicht mehr aus, zeigt keine Kopierhinweis oder bringt das von iOS 15 wieder eingeführte Vergrößerungslens zum Einsatz. Ihre Web-App fühlt sich nicht mehr wie eine Web-Seite in einem nativen Shell.
Unter der Haube setzt der Plugin die Eigenschaft WKPreferences.isTextInteractionEnabled on the app's WKWebView. Es ändert nichts anderes.
Wann Sie es verwenden sollten
- Games, Kioske und Zeichnungs-Apps wo lange Drücken und Ziehen niemals Text auswählen sollte.
- Benutzerdefinierte lange Drücken-Menüs die mit den nativen Auswahlhandhabern und Hinweisen kollidieren.
- Medienplayer, Karten und Karussells wo ein langsames Wischen versehentlich den Loupe auslöst.
- Branded, appart-like Oberfläche wo auswählbare Beschriftungen und Schaltflächen die natürliche Oberfläche stören.
Halten Sie die Textinteraktion für Bildschirme offen, auf denen Benutzer lange Inhalte lesen, die sie kopieren möchten, oder auf denen sie Formulare ausfüllen.
Installieren
bun add @capgo/capacitor-textinteraction
bunx cap sync
Nein Info.plist Keine Schlüssel, Berechtigungen oder capacitor.config.ts Einträge sind erforderlich.
| Plugin-Version | Capacitor Version | Wartung |
|---|---|---|
| v8.x | v8.x | Ja |
| v7.x | v7.x | Nach Bedarf |
| v6.x und älter | v6.x und älter | Nein |
Textinteraktion auf 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');
}
Always übermitteln enabled explicitly. Die native Seite behandelt einen fehlenden Wert als false.
Während Textinteraktion ausgeschaltet ist,
Während die Textinteraktion ausgeschaltet ist, <input>, <textarea> und contenteditable Die Eingabe wird gestoppt. Aktivieren Sie sie für jede Seite mit einem Formular und deaktivieren Sie sie, wenn der Benutzer die Seite 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);
Mit einem Router aufrufen setTextInteraction(true) bei Eingabe in Routen, die Eingabefelder enthalten (z.B. Vue Router beforeEnter, ein React useEffect, oder Angular ionViewWillEnter) und setTextInteraction(false) bei Verlassen.
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;
}
CSS funktioniert pro Element, daher bleiben alle vergessenen Auswahlmöglichkeiten erhalten und es ändert sich auch nicht, wie der WebView selbst mit langen Drücken umgeht. Der Plugin funktioniert auf der Ebene des WebViews: Ein Aufruf reicht für jede Seite, einschließlich des Magnifizierungs-Linsen. Viele Apps verwenden beide: Das Plugin für appartige Seiten und CSS für feine Kontrolle innerhalb von Seiten, bei denen die Textinteraktion aktiv bleibt.
API Referenz
toggle(options)
toggle(options: { enabled: boolean }): Promise<{ success: boolean }>
Aktiviert oder deaktiviert die Textinteraktion für das Capacitor WebView.
enabled:truewiederherstellt die Auswahl, den Hinweis und das Vergrößerungsglas.falsedeaktiviert sie.success:truewenn die Änderung angewendet wurde (ab iOS 14.5+ mit einem WebView verfügbar).falseauf Android und wenn kein WebView verfügbar ist.
getPluginVersion()
getPluginVersion(): Promise<{ version: string }>
Gibt die native Pluginversion zurück. Gibt zurück web Verhaltensweise der Plattform
Verhalten der Plattform
| Verhalten | iOS 14.5+ |
|---|---|
| Setzt | Sets isTextInteractionEnabled On dem WKWebView. Wird auf allen Seiten bis zum erneuten Umstellung angewendet. |
| Android | Keine Aktion. Löst { success: false }Verwenden Sie CSS, wenn Sie die Auswahl einschränken müssen. |
| Web | toggle werfen Sie eine nicht implementierte Fehlermeldung. Wachenaufrufe mit Capacitor.getPlatform(). |
Unterstützung
- Eingabefelder funktionieren nicht mehr. Eingaben funktionieren nicht mehr.
toggle({ enabled: true })Textinteraktion ist weiterhin deaktiviert. Rufen Sie - vor der Anzeige des Formulars auf. Erfreulich. Das Plugin unterstützt nur iOS.
TextInteraction.toggle is not available on web. Die Anfrage wurde im Browser oder während der Entwicklung in einem Desktopbrowser ausgeführt. Verwenden Sie einen Plattformprüfung.- Die Auswahl wird nach einem Neustart der App zurückgegeben. Jeder Start erstellt einen neuen WebView mit Textinteraktion aktiviert. Rufen Sie ihn
toggle({ enabled: false })während des Startens auf.
Zugehörige Plugins
- Privatsphäre-Bildschirm versteckt Inhalte der App im iOS-Switcher und blockiert Android-Screenshots.
- Home-Indikator versteckt den iOS-Home-Indikator für immersive Screens.
- Bildschirmorientierung sperrt und liest die Bildschirmorientierung.
- Alle anzeigen Capacitor Plugins nach Capgo.
Die Änderung ohne App Store-Bewertung verschicken
Das Textinteraktionstoggle ist JavaScript. Sobald das Plugin in Ihrem native Build ist, können Sie mit ihm festlegen, wo und wann es läuft. Capgo live update anstatt auf die App Store-Bewertung zu warten.
Vollständige Referenz
- Docs: Dokumentation zum Text-Interaktion-Plugin
- Getting started: Install and API guide
- Source: Cap-go/capacitor-textinteraction auf GitHub