[JavaScript] 変数の値をクリップボードに入れる方法

以下の隠しinputタグの値「world」をクリップボードに入れるにはどのように記述すればいいでしょうか？

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <script>
6    var toClipBoard = function(id){
7      var input = document.getElementById(id);
8      alert(input.value);
9    }
10  </script>
11</head>
12<body>
13<input type="hidden" id="hello" value="world">
14<button onclick="toClipBoard('hello')">クリック！</button>
15</body>
16</html>

行動規範の内容に同意します

回答2件

手で実装するのは複雑なようなので、clipboard.jsのようなライブラリを使うのが手っ取り早いです。

投稿2017/03/30 08:43

maisumakun

総合スコア145184

horik

2017/03/30 08:46

はじめにclipboard.jsで試したんですが、複数のinputタグがある場合に上手く動かなかったので今回の質問になりました。この質問は取り消して、新たにclipboard.jsの質問を作りなおしたほうが良いでしょうか？

行動規範の内容に同意します

自己解決

以下で自己解決しました。
buttonタグのvalueの値をそのままクリップボードに入れるスクリプトです。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
6  <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
7  <script>
8    $(function () {
9      let clipboard = new Clipboard('.btn', {
10        text: function(b) {
11          return b.value;
12        }
13      });
14    });
15  </script>
16</head>
17<body>
18
19<button class="btn" value="foo">fooをコピー</button>
20<button class="btn" value="bar">barをコピー</button>
21
22</body>
23</html>
24