Android设备中navigator.clipboard.readText()失效，求解决方案

你的navigator.clipboard.readText()在常规浏览器中可正常运行，但打包为Android应用后无法工作，以下是几种针对性的解决思路：

1. 检查Android WebView权限与配置 #

Android WebView默认可能限制剪贴板读取权限，需在应用端做以下配置：

• 在AndroidManifest.xml中添加剪贴板读取权限：

  <!-- 适配Android 10及以下版本 -->
  <uses-permission android:name="android.permission.READ_CLIPBOARD_IN_BACKGROUND" />
  <!-- 适配Android 13+版本 -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

• 在WebView初始化代码中开启必要设置：

  WebSettings webSettings = webView.getSettings();
  webSettings.setJavaScriptEnabled(true);
  webSettings.setDomStorageEnabled(true);
  // 允许访问剪贴板相关API
  webSettings.setAllowUniversalAccessFromFileURLs(true);
  webSettings.setAllowFileAccess(true);
  

2. 用input元素模拟剪贴板读取 #

由于部分Android WebView对navigator.clipboard支持不完善，可通过创建隐藏input元素触发粘贴操作来读取内容：

function readClipboardText() {
  return new Promise((resolve, reject) => {
    const input = document.createElement('input');
    input.style.position = 'fixed';
    input.style.opacity = '0';
    input.style.pointerEvents = 'none';
    document.body.appendChild(input);

    // 需在用户交互事件中执行（比如按钮点击回调内）
    input.focus();
    if (document.execCommand('paste')) {
      resolve(input.value);
    } else {
      reject(new Error('无法读取剪贴板'));
    }
    document.body.removeChild(input);
  });
}

// 使用示例
readClipboardText()
  .then((clipboardText) => {
    const listCopiedToArray = clipboardText
      .split('\n')
      .filter(el => el !== '')
      .map(todo => todo.replace(/\b-\b/g, '').trim());

    if (listCopiedToArray.includes('ListCopied')) {
      // 自定义逻辑
    } else {
      // 其他逻辑
    }
  })
  .catch(err => console.log(err));

注意：该方法必须在用户交互触发的事件（如按钮点击）中执行，否则会被WebView拦截。

3. 借助Android原生代码桥接（最稳定方案） #

通过WebView的JS接口调用Android原生剪贴板API，彻底规避WebView的限制：

第一步：Android原生端添加JS接口 #

// 初始化WebView时注册接口
webView.addJavascriptInterface(new ClipboardInterface(), "ClipboardBridge");

// 定义剪贴板操作类
class ClipboardInterface {
  @JavascriptInterface
  public String getClipboardText() {
    ClipboardManager clipboard = (ClipboardManager) getSystemService(Context.CLIPBOARD_SERVICE);
    if (clipboard.hasPrimaryClip() && clipboard.getPrimaryClip().getItemCount() > 0) {
      CharSequence text = clipboard.getPrimaryClip().getItemAt(0).getText();
      return text != null ? text.toString() : "";
    }
    return "";
  }
}

第二步：前端调用原生接口 #

if (window.ClipboardBridge) {
  const clipboardText = window.ClipboardBridge.getClipboardText();
  const listCopiedToArray = clipboardText
    .split('\n')
    .filter(el => el !== '')
    .map(todo => todo.replace(/\b-\b/g, '').trim());

  if (listCopiedToArray.includes('ListCopied')) {
    // 自定义逻辑
  } else {
    // 其他逻辑
  }
} else {
  console.log("原生剪贴桥接未初始化");
}

内容的提问来源于stack exchange，提问作者Luca