9 строк кода для копирования содержимого в буфер обмена

внешний интерфейс

Demo: ma125120.GitHub.IO/ma-Dom/тест…

Этот метод в основном используетRangeОбъекты и HTML5Selection API, После тестирования этот метод хорошо работает в основных браузерах, таких как Google Chrome, браузер Firefox, браузер безопасности 360 и высокоскоростной браузер Sogou.

Сначала прикрепите код, который вы больше всего хотите видеть:

function copy(el) {
	var range = document.createRange();
	var end = el.childNodes.length;
	range.setStart(el,0);
	range.setEnd(el,end);

	var selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
	document.execCommand("copy",false,null);
	selection.removeRange(range);
}

Этапы реализации

  1. Первый — использовать **document.createRange()**СоздаватьRangeобъекта, а затем получить длину и размер дочерних элементов копируемого элемента, а затем вызвать методы setStart и setEnd объекта Range, чтобы установить размер области выделения.
  2. В это время задается только размер области выделения.На самом деле в окне она реально не выделена,поэтому необходимо вызыватьwindow.getSelection()генерироватьSelectionобъект, лучше всего вызвать перед добавлением выбораselection.removeAllRanges()Снимите другие выделения, иначе браузер может выдать следующее предупреждение перед вызовом объекта Selection.addRangeметод, передайте диапазон предыдущего шага в качестве параметра, и тогда копируемый элемент может быть фактически установлен в качестве выделенной области.
  3. Теперь вы можете вызвать его после выделения текста, как обычноdocument.execCommandчтобы скопировать текст выделенной области в буфер обмена.
  4. Наконец, вам нужно позвонитьSelectionМетод removeRange объекта будетRangeОбъект удаляется, чтобы гарантировать, что в выделенной области всегда будет только один выделенный элемент, иначе некоторые браузеры могут в следующий раз выдать предупреждение или ошибку, потому что выделенных элементов два.

Другие ситуации

(Спасибо за вопрос, иначе я бы его не нашел) Приведенный выше код подходит для элементов, не являющихся элементами формы, если это элемент формы, вам не нужно использоватьSelection API, просто используйтеel.select(); document.execCommand("copy",false,null);можно объединить вместе

function copy(el) {
    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
        el.select();
    } else {
        var range = document.createRange();
    	var end = el.childNodes.length;
    	range.setStart(el,0);
    	range.setEnd(el,end);
    
    	var selection = window.getSelection();
    	selection.removeAllRanges();
    	selection.addRange(range);
    }
	
	document.execCommand("copy",false,null);
	range && selection.removeRange(range);
}

Уведомление

--

При вызове этой функции она должна быть после нажатия кнопки или нажатия с помощьюuser-select: noneатрибут элемента, иначе браузер может выдать такое предупреждение:[Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See woohoo. chrome status.com/features/66…   for more details.

Наконец, прикрепите адрес github:GitHub.com/ma125120/ma….

следовать за

Эта функция на самом деле относительно проста.Если вы хотите использовать более полную функцию, например, добавить дополнительный текст в конце после копирования содержимого, вы можете использовать эту функцию в другой моей библиотеке.copy.js. Способ использования описан в readme.md.

Если у вас есть какие-либо вопросы, пожалуйста, оставьте свои комментарии в разделе комментариев ниже.

Категории