1

Как скопировать текст из поля ввода в буфер обмена, при нажатии на ссылку/кнопку?

2

2 ответа 2

2

Копировать в буфер позволяет только IE. Для других браузеров можно использовать flash.

Хотя если быть совсем уж точным, то некоторые версии браузеров все-таки позволяют копировать текст в буфер с помощью javascript. Однако пользователю при этом будет показываться предупреждение.

1
  • или как в линуксе - копировать===выделить
    – zb'
    Commented 20 февр. 2014 в 13:47
0

Для того чтобы скопировать текст из поля ввода в буфер обмена при нажатии на ссылку или кнопку, вы можете использовать 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) используется для копирования текста в буфер обмена

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.