не могу сделать буфер обмена JS для работы с textarea - PullRequest
Новая
       6

не могу сделать буфер обмена JS для работы с textarea

0 голосов
/ 04 января 2019

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>pilcit</title>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

<script>
var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    alert(e);
});
clipboard.on('error', function(e) {
    alert(e);
});
</script>

</head>
<body>
         <textarea id="copy" class="form-control mt-5" name="content" rows="4">
              content of text area that is to be copied 
         </textarea>

        <button class="copyButton" id="copyButtonId" data-clipboard-action="copy" data-clipboard-target="copy">Copy!</button>       
</body>
</html>

Я не могу заставить его работать, в чем проблема?

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Для этого можно использовать jQuery. Метод execCommand() выполняет указанную команду для выбранной части редактируемого раздела.

jQuery 

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

JavaScript 

document.querySelector("button").onclick = function(){
  document.querySelector("textarea").select();
  document.execCommand('copy');
};
<textarea>Copy my this ya</textarea>
<br>
<button>Select</button>
0 голосов
/ 04 января 2019

Вам не хватает этого 

data-clipboard-action="copy" data-clipboard-target="#copy"

здесь copy должно быть #copy, потому что вы выбираете его по id 

var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    alert(e);
});
clipboard.on('error', function(e) {
    alert(e);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>


         <textarea id="copy" class="form-control mt-5" name="content" rows="4">
              content of text area that is to be copied 
         </textarea>

        <button class="copyButton" id="copyButtonId" data-clipboard-action="copy" data-clipboard-target="#copy">Copy!</button>
...