Ionic 4 监控剪贴板更改

Question

我是 ionic 4 的新手。我有一个开发移动应用程序的用例。我更喜欢使用混合（ionic 4）。

如您所知，如果用户从任何应用程序复制文本操作，操作系统将使用剪贴板并将复制文本保留在内存中。任何应用程序都可以从剪贴板读取该文本。”

我的用例是我想创建一个始终位于顶部的应用程序（如系统覆盖）并监视剪贴板更改。如果剪贴板上有价值，我想做点什么并向用户提供一些建议。

请给我建议一个带有示例代码的系统设计。

Answer 1

离子电容器有一个 api 到剪贴板。这个例子来自文档：

import { Plugins } from '@capacitor/core';

const { Clipboard } = Plugins;

Clipboard.write({
  string: "Hello, Moto"
});

let str = await Clipboard.read({
  type: "string"
});
console.log('Got string from clipboard:', str.value);

该 API 还具有剪贴板监听器。它应该支持您的用例。

希望这有帮助。

Answer 2

（下面的答案是从我原来的回复中粘贴的将文本复制到离子中的剪贴板，在类似的线程上）

由于我最近一直在努力解决同样的问题，而且官方文档或大多数 StackOverflow 答案都没有帮助，所以我想将其留在这里，因为我找到的解决方案虽然可能没有准确回答帖子作者所需的内容，但可能会有所帮助某人。请注意，此示例基于 Ionic-Angular，对于 Ionic-React 或 Ionic-Vue 实现可能没有用。

奇怪的是，至少在 Android 中，(ionInput) 事件可以检测到剪贴板中的粘贴。因此，即使文本是从外部应用程序（WhatsApp、浏览器等）粘贴的，您也可以使用类似的方法来读取设备剪贴板中粘贴的文本：

HTML：

<ion-input formControlName="myInput" (ionInput)="onInput($event)"></ion-input>

TS：

import { Clipboard, ReadResult } from '@capacitor/clipboard';

  onInput(event) {
    Clipboard.read().then((clipboardRead: ReadResult) => {
      if (clipboardRead?.value) {
      // Call any functions, method, do whatever you need with the input
      // call event.preventDefault() if you need to do anything with the captured string instead of pasting it directly into the input
      event.preventDefault();
        return;
      }
    });
}

另一种方法是将 Clipboard.read() 函数放在构造函数中，但由于 read() 方法返回一个 Promise，我发现它只能在每个组件或页面初始化时工作一次，因此我无法第一次成功捕获后检测复制的字符串。或者换句话说，我能够从剪贴板捕获字符串一次，但不能在同一页面上第二次捕获字符串。如果我将另一个应用程序或浏览器放在前台来复制一段文本并尝试再次粘贴它，则将函数放置在 ionViewWillEnter 循环中也没有效果，所以我放弃了这种方法。

在 iOS 上，至少从我在 iPhoneX 和 iPhone SE 第二代上测试的情况来看（我可能会在测试更现代的型号后编辑这个答案），可以通过 (paste) 事件捕获剪贴板中的粘贴，因此它似乎不需要特定的 iOS 实现。它看起来像这样：

HTML：

TS：

    onPaste(event) {
    // console.log('full event > onPaste', event)
    event.preventDefault();
    const pastedData = event.clipboardData.getData('text');
    // Do whatever you need with the pasted string
  }