ガイド
Capacitorでテキストインタラクションを使用する方法
Capacitor iOSアプリでテキスト選択と拡大鏡レンズを無効にする
@capgo/capacitor-textinteraction Capacitor iOSアプリのWebViewのテキストインタラクションをオンオフにする1つのコールを提供します。オフの場合、長押しするとテキストが選択されなくなり、コピーのコールアウトも表示されなくなり、iOS 15で再導入された拡大鏡レンズも表示されなくなります。ウェブアプリは、ネイティブシェルの中にウェブページのように感じなくなります。
プラグインは以下の設定を行っています WKPreferences.isTextInteractionEnabled アプリの WKWebView。何も変更されません。
使用するタイミング
- ゲーム、キオスク、描画アプリ 長押しとドラッグジェスチャーでテキストを選択しない場合
- 長押しメニュー ネイティブの選択ハンドルとコールアウトと衝突する
- メディアプレーヤー、地図、カーレンズ スローのスワイプがループをトリガーする
- ブランド化された、アプリのようなUI 選択可能なラベルとボタンがネイティブのフィールを破壊する
テキストインタラクションをオンにしたい画面では、ユーザーが長いコンテンツを読むか、フォームを入力する場合に使用する
インストール
bun add @capgo/capacitor-textinteraction
bunx cap sync
否 Info.plist キー、パーミッション、エントリが必要ありません capacitor.config.ts プラグインバージョン
| 長押しメニューをカスタマイズする | Capacitor バージョン | メンテナンス |
|---|---|---|
| v8.x | v8.x | はい |
| v7.x | v7.x | オンデマンド |
| v6.x 以前 | v6.x 以前 | いいえ |
アプリ起動時にテキストインタラクションを無効にする
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');
}
常に明示的に enabled 明示的に指定しないと、 false.
再有効にする
テキスト入力がオフの場合、 <input>, <textarea> そして contenteditable 要素は入力を受け付けなくなる。フォームが入力可能な画面で有効にする、そしてユーザーが画面を離れたときに再び無効にする
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);
ルーターを使用している場合、 setTextInteraction(true) ルーターが入力フィールドを含むルートのenterハンドラで呼び出す beforeEnter,a React useEffectルーターが入力フィールドを含むルートのleaveハンドラで呼び出す ionViewWillEnter) and setTextInteraction(false) ルーターが入力フィールドを含むルートのleaveハンドラで呼び出す
プラグイン vs CSS
CSS を使用して選択を隠すことができます:
body {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input,
textarea,
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
CSS は要素ごとに機能するため、忘れられた部分は選択可能なままになり、ウェブビュー自体の長押しハンドリングには影響しません。プラグインはウェブビューのレベルで機能します: 1 つの呼び出しで、すべての画面、包括的にマグニファイアのレンズがカバーされます。多くのアプリでは、両方を使用します: プラグインはアプリのような画面用、CSS はテキスト インタラクションが画面内で細かい制御が必要な場合に使用します。
API リファレンス
toggle(options)
toggle(options: { enabled: boolean }): Promise<{ success: boolean }>
Capacitor ウェブ ビューのテキスト インタラクションをオンまたはオフにします。
enabled:true選択、コールアウト、そしてマグニファイアのレンズが復元されます。falseそれらが無効になります。success:trueiOS 14.5 以降のウェブ ビューが利用可能な場合に変更が適用されたとき。falseAndroid では、ウェブ ビューが利用可能でない場合に。
getPluginVersion()
getPluginVersion(): Promise<{ version: string }>
ネイティブ プラグインのバージョンを返します。返り値は web ブラウザ内です。
プラットフォームの動作
| プラットフォーム | 動作 |
|---|---|
| iOS 14.5+ | 設定 isTextInteractionEnabled の上 WKWebViewAndroid |
| 何も行わない。解決策 | 。CSSを使用する必要がある場合は、選択を制限する。 { success: false }Web |
| Web | toggle トラブルシューティング Capacitor.getPlatform(). |
Troubleshooting
- 入力が機能しなくなりました。 テキストインタラクションはまだ無効です。呼び出し
toggle({ enabled: true })フォームが表示される前に呼び出してください。 - Androidでは何も変わりません。 期待どおりです。プラグインはiOSのみをサポートしています。
TextInteraction.toggle is not available on web. ブラウザまたはデスクトップブラウザで開発中の場合、呼び出しは実行されました。プラットフォームチェックで囲んでください。- 選択肢は再起動後に戻ります。 各起動で新しいWebViewが作成され、テキストインタラクションが有効になります。起動時に呼び出してください。
toggle({ enabled: false })関連プラグイン
プライバシースクリーン
- iOSアプリSwitcherでアプリのコンテンツを非表示し、Androidのスクリーンショットをブロックします。 iOSアプリ切り替え画面でアプリのコンテンツを非表示し、Androidのスクリーンショットをブロックします。
- ホームインディケーター iOSホームインディケーターを非表示にする
- 画面の向き 画面の向きを固定する
- すべての CapacitorのプラグインをCapgoで参照.
App Storeのレビューなしで変更を配信する
テキストインタラクションを切り替えることはJavaScriptです。Nativeビルドにプラグインを追加すると、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を使用して、どこでいつ実行するかを変更できます。 Capgo live updateを使用するのではなく、App Storeのレビューを待つ必要があります。 完全なリファレンス
ドキュメント:
- ホームインディケーター Capacitor-TextInteractionプラグインドキュメント
- はじめに: インストールとAPIガイド
- ソース: Cap-go/ capacitor -テキストインタラクション on GitHub