В этой статье мы увидим интересную тему, т.е. функциональность копирования в буфер обмена с помощью jQuery. Почти все находят что-то, где они нажимают «Копировать в буфер обмена», чтобы скопировать некоторые значения, будь то текст или что-то еще.

Мы будем использовать концепцию jQuery для реализации функции «Копировать в буфер обмена». Кроме того, мы добавим несколько файлов начальной загрузки, чтобы сделать его на панели, а также для сообщения об успехе, для которого мы будем использовать плагин jquery sweetalert.

Узнать больше -

Давайте начнем.

Создать приложение

Создайте папку с именем js-copy. Создайте в нем файл index.html.

Откройте index.html и запишите в него этот полный код.

index.html

<!DOCTYPE html>
<html lang="en">
​
<head>
<meta charset="utf-8">
<title>Copy To Clipboard Functionality JQuery/Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
​
<body>
​
<div class="container">
<h2>Copy To Clipboard Functionality JQuery/Javascript</h2>
<div class="panel panel-primary">
<div class="panel-heading">Copy To Clipboard Functionality JQuery/Javascript</div>
<div class="panel-body">
<textarea id="comment" class="form-control" rows="5" cols="50"></textarea>
<br>
<button type="button" class="btn btn-primary">Get Value</button>
<p><strong>Note:</strong> Type something in the textarea and click the button to copy content.</p>
</div>
</div>
</div>
​
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("textarea").select();
document.execCommand('copy');
Swal.fire(
'Great!!',
'Content copied to clipboard',
'success'
)
});
});
</script>
</body>
​
</html>

Концепция для jQuery —

#Select content
$("textarea").select();
#Copy content
document.execCommand('copy');

"Узнать больше[…]"