Interaksi Teks Plugin Capacitor

Nonaktifkan pemilihan teks dan lensa pembesar di Capacitor aplikasi iOS

@capgo/capacitor-textinteraction Menghadiahkan Anda satu panggilan untuk mengaktifkan atau menonaktifkan interaksi teks di Capacitor WebView pada iOS. Ketika itu menonaktifkan, menekan tombol panjang tidak lagi memilih teks, menampilkan panggilan salin, atau menampilkan lensa pembesar yang iOS 15 kembali reintroduksi. Aplikasi web Anda berhenti terasa seperti halaman web di dalam shell native.

Di bawah kerangka kerja plugin ini mengatur WKPreferences.isTextInteractionEnabled on aplikasi's WKWebView. Ini tidak mengubah apa pun lainnya.

Kapan menggunakan plugin ini

• Permainan, kiosk, dan aplikasi gambar di mana gestur tekan panjang dan geser tidak boleh memilih teks.
• Menu panjang-tekuk kustom yang bertabrakan dengan tangan pemilihan native dan panggilan.
• Pemain media, peta, dan carousel di mana geser lambat secara tidak sengaja menimbulkan loupe.
• Antarmuka pengguna yang terkenal, seperti aplikasi dimana label dan tombol yang dapat dipilih mengganggu perasaan asli.

Tetapkan interaksi teks aktif untuk layar-layar di mana pengguna membaca konten panjang yang mungkin ingin mereka salin, atau di mana mereka mengisi formulir.

Install

bun add @capgo/capacitor-textinteraction
bunx cap sync

Tidak Info.plist keys, izin akses atau capacitor.config.ts keamanan, izin atau

Nonaktifkan interaksi teks pada awal aplikasi

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 lakukan enabled Dengan eksplisit. Sisi native menganggap nilai hilang sebagai false.

Sementara interaksi teks dimatikan,

Sementara interaksi teks dimatikan, <input>, <textarea> dan contenteditable Elemen-elemen tidak menerima input lagi. Aktifkan kembali untuk layar mana pun yang memiliki formulir, lalu matikan lagi ketika pengguna meninggalkannya.

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) dalam hook masuk jalur yang mengandung input (misalnya Vue Router beforeEnter, sebuah React useEffect, atau Angular ionViewWillEnter) dan setTextInteraction(false) ketika meninggalkannya.

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 dapat dipilih, dan tidak mengubah cara WebView itu sendiri menghandle tekan panjang. Plugin bekerja pada tingkat WebView: satu panggilan mencakup setiap layar, termasuk lensa pembesar. Banyak aplikasi menggunakan kedua-duanya: plugin untuk layar aplikasi dan CSS untuk kontrol halus di dalam layar di mana interaksi teks tetap aktif.

API referensi

toggle(options)

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

Mengaktifkan atau menonaktifkan interaksi teks untuk Capacitor WebView.

• enabled: true Mengembalikan seleksi, panggilan, dan lensa pembesar. false Menghilangkan fitur-fitur tersebut.
• success: true ketika perubahan telah diterapkan (iOS 14.5+ dengan WebView tersedia). false pada Android dan ketika WebView tidak tersedia.

getPluginVersion()

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

Mengembalikan versi plugin native. web Mengembalikan versi plugin native.

Mengembalikan versi plugin native.

Troubleshooting

• Masalah masukan berhenti bekerja. Interaksi teks masih dinonaktifkan. Hubungi toggle({ enabled: true }) Interaksi teks masih dinonaktifkan. Panggil
• sebelum formulir ditampilkan. Diharapkan. Plugin ini hanya mendukung iOS.
• TextInteraction.toggle is not available on web. Panggilan berjalan di browser atau selama pengembangan di browser desktop. Tutupinya dengan periksa platform.
• Pilihan kembali setelah aplikasi di-restart. Setiap peluncuran membuat WebView baru dengan interaksi teks diaktifkan. Panggil toggle({ enabled: false }) selama startup.

Plugin terkait

• Screen Privasi menghilangkan konten aplikasi di pengganti aplikasi iOS dan menghalangi screenshot Android.
• Indikator Home menghilangkan indikator home iOS untuk layar yang imersif.
• Orientasi Layar mengunci dan membaca orientasi layar.
• Semua plugin Capacitor plugin oleh Capgo.

Rilis perubahan tanpa tinjauan App Store

Tombol interaksi teks adalah JavaScript. Setelah plugin masuk ke dalam aplikasi asli Anda, Anda dapat mengubah tempat dan waktu penggunaannya dengan Capgo live update daripada menunggu tinjauan App Store.

Referensi lengkap

• Docs: Dokumentasi plugin Interaksi Teks
• Panduan awal: Instalasi dan panduan API
• Sumber: Cap-go/capacitor-interaksi teks pada GitHub