Interaksi Teks plugin Capacitor

Nonaktifkan seleksi teks dan lensa pembesar di aplikasi Capacitor iOS

@capgo/capacitor-textinteraction memberikan satu panggilan untuk mengaktifkan atau menonaktifkan interaksi teks pada Capacitor WebView di iOS. Saat nonaktif, menekan teks tidak lagi menyeleksinya, menampilkan callout salin, atau memunculkan lensa pembesar yang diperkenalkan ulang di iOS 15. Aplikasi web Anda tidak lagi terasa seperti halaman web di dalam shell native.

Di balik layar, plugin ini mengatur WKPreferences.isTextInteractionEnabled on the app's WKWebViewaplikasi. Tidak ada perubahan lain.

Kapan harus menggunakannya

• Game, kios, dan aplikasi menggambar di mana gestur tekan lama dan seret tidak boleh menyeleksi teks.
• Menu tekan lama kustom yang bentrok dengan handle seleksi dan callout native.
• Pemutar media, peta, dan carousel di mana gesekan lambat secara tidak sengaja memicu loupe.
• UI bermerek, seperti aplikasi di mana label dan tombol yang dapat dipilih merusak nuansa native.

Biarkan interaksi teks tetap aktif untuk layar tempat pengguna membaca konten panjang yang mungkin ingin disalin, atau saat mereka mengisi formulir.

Instal

bun add @capgo/capacitor-textinteraction
bunx cap sync

Tidak Info.plist keys, permissions, atau capacitor.config.ts entries diperlukan.

Versi plugin	versi Capacitor	Dipelihara
v8.x	v8.x	Ya
v7.x	v7.x	Sesuai permintaan
v6.x dan lebih lama	v6.x dan lebih lama	Tidak

Nonaktifkan interaksi teks saat aplikasi dimulai

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

Selalu kirim enabled secara eksplisit. Sisi native menganggap nilai yang hilang sebagai false.

Aktifkan kembali sebelum pengguna mengetik

Saat interaksi teks nonaktif, <input>, <textarea> dan contenteditable Elemen berhenti menerima input. Aktifkan kembali untuk layar dengan form, lalu matikan saat pengguna keluar.

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

Dengan router, panggil setTextInteraction(true) di enter hook rute yang berisi input (misalnya Vue Router beforeEnter, React useEffect, atau Angular ionViewWillEnter) dan setTextInteraction(false) saat keluar dari rute tersebut.

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 bekerja per elemen, jadi apa pun yang Anda lupakan tetap bisa diseleksi, dan tidak mengubah cara WebView menangani long-press. Plugin bekerja di level WebView: satu panggilan mencakup semua layar, termasuk lensa pembesar. Banyak aplikasi menggunakan keduanya: plugin untuk layar bergaya aplikasi dan CSS untuk kontrol detail di dalam layar di mana interaksi teks tetap aktif.

referensi API

toggle(options)

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

Mengaktifkan atau menonaktifkan interaksi teks untuk Capacitor WebView.

• enabled: true memulihkan seleksi, callout, dan lensa pembesar. false menonaktifkannya.
• success: true ketika perubahan diterapkan (iOS 14.5+ dengan WebView tersedia). false di Android dan ketika tidak ada WebView yang tersedia.

getPluginVersion()

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

Mengembalikan versi plugin native. Mengembalikan web di browser.

Perilaku platform

Platform	Perilaku
iOS 14.5+	Menetapkan isTextInteractionEnabled di WKWebView. Berlaku untuk semua halaman hingga diaktifkan kembali.
Android	No-op. Resolusi { success: false }. Gunakan CSS jika Anda perlu membatasi seleksi.
Web	toggle melempar error unimplemented. Lindungi panggilan dengan Capacitor.getPlatform().

Pemecahan Masalah

• Input berhenti berfungsi. Interaksi teks masih nonaktif. Panggil toggle({ enabled: true }) sebelum form ditampilkan.
• Tidak ada perubahan di Android. Sesuai harapan. Plugin ini hanya mendukung iOS.
• TextInteraction.toggle is not available on web. Panggilan ini berjalan di browser atau saat development di browser desktop. Bungkus dengan platform check.
• Seleksi muncul kembali setelah app di-restart. Setiap launch membuat WebView baru dengan text interaction aktif. Panggil toggle({ enabled: false }) saat startup.

Plugin terkait

• Layar Privasi menyembunyikan konten app di iOS app switcher dan memblokir screenshot di Android.
• Indikator Home menyembunyikan home indicator iOS untuk layar imersif.
• Orientasi Layar mengunci dan membaca orientasi layar.
• Lihat semua plugin Capacitor oleh Capgo.

Rilis perubahan tanpa review App Store

Toggle interaksi teks dilakukan lewat JavaScript. Setelah plugin ada di native build Anda, Anda bisa mengubah di mana dan kapan ia berjalan dengan Capgo live update alih-alih menunggu review App Store.

Referensi lengkap

• Dokumentasi: Dokumentasi plugin Text Interaction
• Getting started: Panduan instalasi dan API
• Sumber: Cap-go/capacitor-textinteraction di GitHub