JavaScript скопировать содержимое в буфер обмена

внешний интерфейс GitHub JavaScript iOS

Оригинальная ссылка:GitHub.com/Axuebian/art…

На странице недавних действий есть небольшое требование: пользователь может щелкнуть или долго нажимать, чтобы скопировать содержимое в буфер обмена, и записать процесс внедрения и обнаруженные ямки.

общий метод

Проверил всемогущий гугл, и сейчас распространенных способов в основном два следующих:

  • Сторонняя библиотека: clipboard.js
  • Собственный метод: document.execCommand()

Давайте посмотрим, как используются эти два метода.

clipboard.js

Это официальный сайт буфера обмена:clipboardjs.com/, кажется так просто.

Цитировать

Прямая цитата:<script src="dist/clipboard.min.js"></script>

Мешок:npm install clipboard --save,Потомimport Clipboard from 'clipboard';

использовать

Копировать из поля ввода

Теперь есть<input>label, нам нужно скопировать его содержимое, мы можем сделать это:

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">点我复制</button>

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');

обратите внимание, что в<button>добавил тег вdata-clipboard-targetАтрибут, значение которого необходимо скопировать<input>изid, как следует из названия, копирует содержимое всего тега.

прямая копия

Иногда мы не хотим<input>Скопируйте содержимое из переменной, просто получите значение непосредственно из переменной. если вVueМы можем это сделать:

<button class="btn" :data-clipboard-text="copyValue">点我复制</button>

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';

мероприятие

Иногда нам нужно что-то сделать после копирования, и в этом случае нам нужна поддержка callback-функций.

Добавьте следующий код в функцию-обработчик:

// 复制成功后执行的回调函数
clipboard.on('success', function(e) {
    console.info('Action:', e.action); // 动作名称，比如：Action: copy
    console.info('Text:', e.text); // 内容，比如：Text：hello word
    console.info('Trigger:', e.trigger); // 触发元素：比如：<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
    e.clearSelection(); // 清除选中内容
});

// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

резюме

В документации также упоминается, что при использовании на одной страницеclipboard, чтобы сделать управление жизненным циклом более элегантным, помните после использованияbtn.destroy()Уничтожьте это.

clipboardЭто легко использовать. Однако только дляcopyНе элегантно ли использовать дополнительные сторонние библиотеки для функций, что мне делать в это время? Затем используйте собственный метод для его достижения.

Метод document.execCommand()

Взгляните на этот методMDNКак определяется вышеизложенное:

which allows one to run commands to manipulate the contents of the editable region.

Это означает, что вы можете разрешить запущенным командам манипулировать содержимым редактируемой области.редактируемая область.

определение

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

метод возвращаетBooleanЗначение, указывающее, была ли операция успешной или нет.

  • aCommandName: указывает имя команды, например:copy, cutи т.д. (дополнительные команды см.Заказ);
  • aShowDefaultUI: отображать ли пользовательский интерфейс, обычноfalse;
  • aValueArgument: некоторые команды требуют дополнительных параметров, которые обычно не используются;

совместимость

Совместимость этого метода в прошлом была не очень хорошей, но, к счастью, теперь он в основном совместим со всеми основными браузерами, а также может использоваться на мобильном терминале.

兼容性

использовать

Копировать из поля ввода

Теперь есть<input>тег, мы хотим скопировать его содержимое, мы можем сделать это:

<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
	const input = document.querySelector('#demoInput');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
})

Копировать в другое место

Иногда страница не<input>теги, нам может понадобиться начать с<div>Скопируйте содержимое или скопируйте переменную напрямую.

помнить вexecCommand()В определении метода упоминается, что он может работать толькоредактируемая область, а это значит, что помимо<input>,<textarea>Вне таких полей ввода этот метод использовать нельзя.

В это время нам нужна кривая, чтобы спасти страну.

<button id="btn">点我复制</button>

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
	document.body.appendChild(input);
 	input.setAttribute('value', '听说你想复制我');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
    document.body.removeChild(input);
})

Это можно расценивать как успех в спасении страны кривой. При использовании этого метода я столкнулся с несколькими ямами.

яма столкнулась

При отладке в Chrome этот метод работает отлично. Затем, когда дело доходит до отладки на мобильном терминале, яма выходит.

Да, верно, это ты, ios. . .

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

    Знание того, из-за чего возникает джиттер, является лучшим решением. Поскольку клавиатура подтягивается, то есть фокусируется на поле ввода, то, пока поле ввода не может быть введено, добавьте в кодinput.setAttribute('readonly', 'readonly');Сделай это<input>доступен только для чтения, он не будет подтягивать клавиатуру.

  2. не могу скопировать

    Эта проблема связана сinput.select()В iOS нет всего контента, нам нужно использовать другой метод для выбора контента, этот методinput.setSelectionRange(0, input.value.length);.

Полный код выглядит следующим образом:

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
    input.setAttribute('readonly', 'readonly');
    input.setAttribute('value', 'hello world');
    document.body.appendChild(input);
	input.setSelectionRange(0, 9999);
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
    document.body.removeChild(input);
})

Суммировать

Вышеприведенное о том, как JavaScript реализует копирование содержимого в буфер обмена, с несколькими ссылками:

execCommand MDN

execCommand совместимость

clipboard.js

Категории