Android端Chrome中从Gboard向PWA粘贴图片的可行方案咨询

针对你遇到的Android 13系统下，Chrome的PWA无法通过<input type="text">或contenteditable元素接收Gboard粘贴图片的问题，以下是几个经过验证的解决思路：

• 改用文件输入框结合剪贴板事件
  <input type="text">本身不支持图片/文件类型的输入，这是HTML规范限制。可以使用<input type="file" accept="image/*" style="display:none">，同时监听目标区域的paste事件，手动读取剪贴板中的图片Blob：

  document.addEventListener('paste', async (e) => {
    e.preventDefault();
    const items = e.clipboardData.items;
    for (let item of items) {
      if (item.type.startsWith('image/')) {
        const blob = item.getAsFile();
        // 这里处理图片Blob，比如上传或显示
        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        document.body.appendChild(img);
      }
    }
  });
  

• 修复contenteditable的粘贴问题
  Android Chrome对contenteditable的剪贴板处理有特殊行为，需要确保元素获得焦点，并且明确监听paste事件阻止默认行为后手动插入图片：

  const editableEl = document.querySelector('[contenteditable]');
  editableEl.addEventListener('paste', (e) => {
    e.preventDefault();
    const clipboardData = e.clipboardData || window.clipboardData;
    const imageItem = Array.from(clipboardData.items).find(item => item.type.startsWith('image/'));
    if (imageItem) {
      const blob = imageItem.getAsFile();
      const img = document.createElement('img');
      img.src = URL.createObjectURL(blob);
      editableEl.appendChild(img);
    }
  });
  

  另外，确保contenteditable元素没有设置readonly，并且在PWA独立模式下测试（有些行为在浏览器标签页和独立PWA中不同）。

• 注意权限和浏览器版本
  Android 13的Chrome需要确保PWA已被授予剪贴板访问权限，同时建议使用Chrome 100+版本，旧版本对剪贴板API的支持不完善。

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