Скопируйте и вставьте содержимое веб-страницы (три схемы, совместимые с несколькими браузерами)

JavaScript

tags:

  • js
  • ctrl+c

Скопируйте и вставьте содержимое веб-страницы (три схемы, совместимые с несколькими браузерами)

Копировать и вставлять содержимое на веб-страницы

Проблема: необходимо поддерживать различные браузеры, в основном IE, Firefox.

  1. Решение в браузере IE:window.clipboardData.setData("Text", text);
  2. Решения для распространенных браузеров: После выбора элемента выполните:document.execCommand('copy')
  3. Решение под Firefox Два компромисса А. Слушайте событие наведения. Когда мышь перемещается к тексту, который необходимо скопировать, пользователь нажимает Ctrl + C, чтобы осуществить копирование б.window.prompt("Copy to clipboard: Ctrl+C, Enter", text);Содержимое всплывающего окна является выбранной копией, и пользователь нажимает ctrl+c, чтобы скопировать

Код после интеграции

function copyToClipboard(text) {
  if (window.clipboardData) { // Internet Explorer
    window.clipboardData.setData("Text", text);
  } else {
    var textArea = document.createElement("textarea");
    textArea.style.background = 'transparent';
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      if (!document.execCommand('copy')) {
        copyToClipboardMozilla(text);
	  } else {
        showInfo("提示", "复制成功")
      }

    } catch (err) {
      console.log('Oops, unable to copy');
    }
      document.body.removeChild(textArea);
  }
}

function copyToClipboardMozilla(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

$(".copy").on("mouseenter", function () {
  $(this).css("background-color", "#c8c9c8");
  $(this).focus();
  var textArea = document.createElement("textarea");
  textArea.style.background = 'transparent';
  textArea.id = "copyContent";
  textArea.value = $(this).text();
  document.body.appendChild(textArea);
  textArea.select(); 
})

$(".copy").on("mouseleave", function () {
  $(this).css("background-color", "");
 document.body.removeChild(document.getElementById("copyContent")); 
})

Использованная литература:

  1. Несколько общих решений для репликации:
  2. document.execCommand API W3C API
  3. How do I copy to the clipboard in JavaScript?
  4. How does Trello access the user's clipboard?
  5. 20 строк кода JS для реализации функции копирования в буфер обмена

Совместимость с функцией копирования браузера, есть лучшее решение, пожалуйста, оставьте сообщение, чтобы связаться Пожалуйста, не перепечатывайте без разрешения автора, спасибо :)

Категории