JS 获取chrome剪切板数据

Question

希望使用JS获取chrome浏览器中剪切板的数据，数据为字符串类型，求大神帮忙解答...

Answer 1

整理自之前自己的一段代码，保证了绝大部分的兼容性。

uploader上传用你们自己组件吧

// 粘贴事件的监听
ele.on('paste', pasteHandle);

// 粘贴复制上传等功能
function pasteHandle(ev) {
  let cbd = ev.originalEvent.clipboardData;
  let ua = window.navigator.userAgent;

  ev.stopPropagation();
  ev.preventDefault();

  // 如果是 Safari 直接 return
  if (!cbd || !cbd.items || !cbd.types) return;

  // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
  if (cbd.items.length === 2 && cbd.items[0].kind === 'string' && cbd.items[1].kind === 'file' && cbd.types.length === 2 && cbd.types[0] === 'text/plain' && cbd.types[1] === 'Files' &&
    ua.match(/Macintosh/i) && ~~(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) return;

  for (let i = 0, len = cbd.items.length; i < len; i++) {
    let item = cbd.items[i];
    // 文件类型上传
    if (item.kind === 'file') {
      let blob = item.getAsFile();
      if (blob.size === 0) return;
      let fileName = cbd.getData('text/plain');
      // 上传文件
      return uploader(blob, { name: fileName });
    }
  }

  let text = cbd.getData('text/plain');
  // 复制文字
  if (text) insertTextCMD(text);
}

function insertTextCMD(text) {
  if (document.body.createTextRange) {
    let textRange;
    if (document.selection) {
      textRange = document.selection.createRange();
    } else if (window.getSelection) {
      let sel = window.getSelection();
      let range = sel.getRangeAt(0);

      // 创建临时元素，使得TextRange可以移动到正确的位置
      let tempEl = document.createElement('span');
      tempEl.innerHTML = '&#FEFF;';
      range.deleteContents();
      range.insertNode(tempEl);
      textRange = document.body.createTextRange();
      textRange.moveToElementText(tempEl);
      tempEl.parentNode.removeChild(tempEl);
    }
    textRange.text = text;
    textRange.collapse(false);
    textRange.select();
  } else {
    // Chrome之类浏览器
    document.execCommand('insertText', false, text);
  }
}

自己都想给自己一个赞加收藏，23333

Answer 2

ZeroClipboard