フィールドの値(内容)をクリップボードにコピーする方法を教えてください。

レコードの詳細表示画面にて、フィールドの横にコピーボタンを作成し、クリックするとフィールドに入力された内容をクリップボードにコピーするようにしたいのですが、どのようにすれば良いのかわかりません。

試しに郵便番号というフィールド(フィールドコード=郵便番号)で、となりにスペース(id=Zipcode)を作り、以下のコードを作成いたしましたが、うまくいかず、教えていただきたいです。

 

(function() {
“use strict”;

kintone.events.on(‘app.record.detail.show’, function(event) {

var record = event[‘record’];

var ZipcodeCopyButton = document.createElement(‘button’);
ZipcodeCopyButton.id = ‘Zipcode_Copy_button’;
ZipcodeCopyButton.innerText = ‘郵便番号コピー’;
ZipcodeCopyButton.onclick = function() {

let copyFrom = document.createElement(“textarea”);
copyFrom.textContent = record[‘郵便番号’][‘value’];
copyFrom.select();
document.execCommand(‘copy’);
alert(“郵便番号をクリップボードにコピーしました。”);

}

kintone.app.record.getSpaceElement(‘Zipcode’).appendChild(ZipcodeCopyButton);

});
})();

NS さん

こんにちは。

texarea 要素(copyFrom)を DOM に追加する必要がありそうです。
仕組み的には、ダミーの textare にコピーしたい値を表示、自動で文字を選択してクリップボードに送るとしているためです。
ただし、この場合は、ダミーの textarea が画面上に表示されてしまいます。

なので、 textare 要素を入れる代わりに、Async Clipboard API を使うとよいのかなと思いました(IE は非対応)
参考:[JavaScript]クリップボードを使ったコピーとペースト - Qiita

ひよこ様

ご教示いただきありがとうございます。
基本的にはchromeで利用しているので、念のため、ブラウザ判別の条件分岐を前にかませて、教えていただいた内容にしたところ、問題なく動きました。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。