Interazione testuale Plugin Capacitor

Disabilita la selezione del testo e la lente d'ingrandimento nelle app Capacitor iOS

@capgo/capacitor-textinteraction ti permette di attivare o disattivare l'interazione con il testo nella Capacitor WebView su iOS con una sola chiamata. Quando è disattivata, la pressione prolungata sul testo non lo seleziona più, non mostra il callout di copia e non attiva la lente d'ingrandimento reintrodotta con iOS 15. La tua web app smette di sembrare una pagina web dentro una shell nativa.

Sotto il cofano, il plugin imposta WKPreferences.isTextInteractionEnabled on the app's WKWebView. Non cambia nient'altro.

Quando usarlo

• Giochi, kiosk e app di disegno dove i gesti di pressione prolungata e trascinamento non devono mai selezionare il testo.
• Menu personalizzati con pressione prolungata che vanno in conflitto con i selettori e il menu contestuale nativi.
• Media player, mappe e carousel dove uno swipe lento attiva accidentalmente la lente d'ingrandimento.
• UI brandizzata e simile a un'app dove etichette e pulsanti selezionabili rovinano l'esperienza nativa.

Mantieni attiva l'interazione con il testo nelle schermate in cui gli utenti leggono contenuti lunghi che potrebbero voler copiare o dove devono compilare dei form.

Installa

bun add @capgo/capacitor-textinteraction
bunx cap sync

No Info.plist chiavi, permessi o capacitor.config.ts voci sono necessari.

Versione plugin	Versione Capacitor	Mantenuto
v8.x	v8.x	Sì
v7.x	v7.x	On demand
v6.x e precedenti	v6.x e precedenti	No

Disabilita l'interazione con il testo all'avvio

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

Passalo sempre enabled esplicitamente. Il lato nativo considera il valore mancante come false.

Riattivala prima che gli utenti digitino

Quando l'interazione con il testo è disattivata, <input>, <textarea> e contenteditable gli elementi smettono di accettare input. Riattivalo per ogni schermata con un form, poi disattivalo quando l'utente esce.

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, chiama setTextInteraction(true) nell'hook enter delle rotte che contengono input (ad esempio Vue Router beforeEnter, un React useEffect, o Angular ionViewWillEnter) e setTextInteraction(false) quando le lasci.

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

Il CSS funziona elemento per elemento, quindi tutto ciò che dimentichi resta selezionabile e non cambia il modo in cui la WebView gestisce il long-press. Il plugin agisce a livello di WebView: una sola chiamata copre ogni schermata, inclusa la lente d'ingrandimento. Molte app usano entrambi: il plugin per le schermate in stile app e il CSS per un controllo fine nelle schermate in cui l'interazione con il testo resta attiva.

riferimento API

toggle(options)

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

Attiva o disattiva l'interazione con il testo nella WebView di Capacitor.

• enabled: true ripristina la selezione, il callout e la lente d'ingrandimento. false li disabilita.
• success: true quando la modifica è stata applicata (iOS 14.5+ con WebView disponibile). false su Android e quando non è disponibile una WebView.

getPluginVersion()

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

Restituisce la versione del plugin nativo. Restituisce web nel browser.

Comportamento della piattaforma

Piattaforma	Comportamento
iOS 14.5+	Imposta isTextInteractionEnabled su WKWebView. Si applica a tutte le pagine finché non viene disattivato.
Android	No-op. Risolve { success: false }. Usa il CSS se devi limitare la selezione.
Web	toggle lancia un errore di metodo non implementato. Proteggi le chiamate con Capacitor.getPlatform().

Risoluzione problemi

• Gli input hanno smesso di funzionare. L'interazione con il testo è ancora disabilitata. Chiama toggle({ enabled: true }) prima che il form venga mostrato.
• Su Android non cambia nulla. Esatto. Il plugin supporta solo iOS.
• TextInteraction.toggle is not available on web. La chiamata è avvenuta nel browser o durante lo sviluppo su desktop. Avvolgila in un controllo della piattaforma.
• La selezione viene ripristinata dopo il riavvio dell'app. Ogni avvio crea una nuova WebView con l'interazione del testo abilitata. Chiama toggle({ enabled: false }) durante l'avvio.

Plugin correlati

• Privacy Screen nasconde i contenuti dell'app nell'app switcher di iOS e blocca gli screenshot su Android.
• Indicatore Home nasconde l'indicatore Home di iOS per schermi immersivi.
• Orientamento dello schermo blocca e legge l'orientamento dello schermo.
• Esplora tutti Plugin Capacitor di Capgo.

Rilascia la modifica senza la revisione dell'App Store

L'attivazione dell'interazione testuale è JavaScript. Una volta che il plugin è nella tua build nativa, puoi cambiare dove e quando viene eseguito con un Capgo live update invece di aspettare la revisione dell'App Store.

Riferimento completo

• Docs: Documentazione del plugin Text Interaction
• Per iniziare: Guida all'installazione e API
• Sorgente: Cap-go/capacitor-textinteraction su GitHub