Interazione di testo plugin Capacitor

Disabilita la selezione del testo e la lente di ingrandimento in Capacitor le app iOS

@capgo/capacitor-textinteraction Gli dà un solo modo per attivare o disattivare l'interazione del testo per il Capacitor WebView su iOS. Quando è spento, premendo a lungo il testo non lo seleziona più, non mostra la chiamata di copia o porta in evidenza la lente di ingrandimento reintrodotta da iOS 15. La tua app web non sente più come una pagina web all'interno di un guscio nativo.

Sotto la cappa il plugin imposta WKPreferences.isTextInteractionEnabled su l'applicazione WKWebView. Non cambia nulla d'altro.

Quando usarla

• Giochi, kioschi e app di disegno Non selezionare mai il testo con gesti di pressione prolungata e trascinamento.
• Menu di lungo premere personalizzati si scontrano con i maniglioni di selezione nativi e con il callout.
• Giocatori di media, mappe e caroselli ove un lento scorrimento accidentalmente attiva la lente di ingrandimento.
• Interfaccia utente personalizzata, simile a un'applicazione dove i pulsanti e le etichette selezionabili rompono l'aspetto nativo.

Mantieni l'interazione testuale abilitata per le schermate dove gli utenti leggono contenuti lunghi che potrebbero voler copiare, o dove devono compilare formulari.

Installa

bun add @capgo/capacitor-textinteraction
bunx cap sync

No Info.plist chiavi, autorizzazioni o capacitor.config.ts chiavi, autorizzazioni o

Disabilita l'interazione testuale all'avvio dell'app

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

Passa sempre enabled esplicitamente. Il lato nativo considera un valore mancante come false.

Riabilitalo prima che gli utenti inizino a digitare

Mentre l'interazione testuale è disabilitata, <input>, <textarea> Ecco contenteditable I dispositivi smettono di accettare l'input. Attivalo per qualsiasi schermo 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) all'interno dell'hook di ingresso delle rotte che contengono input (ad esempio Vue Router beforeEnter, un React useEffect, o Angular ionViewWillEnter) and setTextInteraction(false) Plugin vs CSS

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 works per element, so anything you forget stays selectable, and it does not change how the WebView itself handles long-press. The plugin works at the WebView level: one call covers every screen, including the magnifier lens. Many apps use both: the plugin for app-like screens and CSS for fine control inside screens where text interaction stays on.

Riferimento API

toggle(options)

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

Abilita o disabilita l'interazione di testo per il WebView Capacitor.

• enabled: true ripristina la selezione, il callout e la lente di ingrandimento. false li disabilita.
• success: true quando il cambiamento è stato applicato (iOS 14.5+ con un WebView disponibile). false su Android e quando non è disponibile alcun WebView.

getPluginVersion()

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

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

Comportamento della piattaforma

Troubleshooting

• Istanze di input non funzionano più. Il testo interattivo è ancora disabilitato. Chiamare toggle({ enabled: true }) Prima che la form sia mostrata.
• Niente cambia su Android. Come previsto. Il plugin supporta solo iOS.
• TextInteraction.toggle is not available on web. La chiamata è stata eseguita nel browser o durante lo sviluppo in un browser desktop. Avvolgila in un controllo di piattaforma.
• La selezione torna dopo il riavvio dell'applicazione. Ogni avvio crea una nuova WebView con l'interazione di testo abilitata. Chiamalo toggle({ enabled: false }) durante l'avvio.

Plugin correlati

• Schermo di privacy nasconde il contenuto dell'applicazione nel raccoglitore di app iOS e blocca le schermate Android.
• Indicatore di casa nasconde l'indicatore di casa iOS per schermi immersivi.
• Orientamento dello schermo blocca e legge l'orientamento dello schermo.
• Esplora tutti Capacitor plugin per Capgo.

Invia il cambiamento senza una revisione dell'App Store

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

Riferimento completo

• Doc: Documentazione del plugin di interazione di testo
• Getting started: Guida di installazione e API
• Fonte: Cap-go/capacitor-interazione di testo su GitHub