Как скопировать текст из поля ввода в буфер обмена, при нажатии на ссылку/кнопку?
-
1deluxeblogtips.com/2010/06/javascript-copy-to-clipboard.html waaave.com/tutorial/jquery/copy-text-to-clipboard-using-jquery– HeidelCommented 20 февр. 2014 в 13:59
-
Цитирую (вторая ссылка): > Well, there's a trick for that, which is using Flash: ZeroClipboard Первая ссылка то же самое. + Код для IE.– VenZellCommented 20 февр. 2014 в 15:05
2 ответа
Копировать в буфер позволяет только IE. Для других браузеров можно использовать flash.
Хотя если быть совсем уж точным, то некоторые версии браузеров все-таки позволяют копировать текст в буфер с помощью javascript. Однако пользователю при этом будет показываться предупреждение.
Для того чтобы скопировать текст из поля ввода в буфер обмена при нажатии на ссылку или кнопку, вы можете использовать JavaScript
и современный API
для работы с буфером обмена. Вот пример кода:
function copyToClipboard() {
// Получаем элемент ввода
const inputElement = document.getElementById('myInput');
// Выделяем текст в поле ввода
inputElement.select();
inputElement.setSelectionRange(0, 99999); // Для мобильных устройств
// Копируем текст в буфер обмена
document.execCommand('copy');
// Опционально: уведомление о копировании
alert("Copied the text: " + inputElement.value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy to Clipboard</title>
</head>
<body>
<input type="text" id="myInput" value="Hello, World!">
<button onclick="copyToClipboard()">Copy Text</button>
</body>
</html>
Функция copyToClipboard()
получает элемент ввода по его ID
Команда document.execCommand('copy')
для копирования выделенного текста в буфер обмена (в документации пишется, что deprecated
)
более современный подход с использованием Clipboard API
function copyToClipboard() {
const inputElement = document.getElementById('myInput');
navigator.clipboard.writeText(inputElement.value).then(function() {
alert("Copied the text: " + inputElement.value);
}).catch(function(error) {
console.error('Error copying text: ', error);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy to Clipboard</title>
</head>
<body>
<input type="text" id="myInput" value="Hello, World!">
<button onclick="copyToClipboard()">Copy Text</button>
</body>
</html>
navigator.clipboard.writeText(inputElement.value)
используется для копирования текста в буфер обмена