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

**URL:** <https://community.cybozu.dev/t/topic/5051>\
**Category:** kintone 開発相談\
**Created:** [2021 年 7 月 2 日午前 6:55 UTC](https://community.cybozu.dev/t/topic/5051 "2021-07-02T06:55:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2199](https://avatars.discourse-cdn.com/v4/letter/l/a88e4f/32.png) [@Legacy\_Account2199](https://community.cybozu.dev/u/Legacy_Account2199)\
**Post date:** [2021 年 7 月 2 日午前 6:55 UTC](https://community.cybozu.dev/t/topic/5051/1 "2021-07-02T06:55:33Z")

</div>

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

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

&nbsp;

(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);

});  
})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account870](https://avatars.discourse-cdn.com/v4/letter/l/cc9497/32.png) [@Legacy\_Account870](https://community.cybozu.dev/u/Legacy_Account870)\
**Post date:** [2021 年 7 月 2 日午前 7:44 UTC](https://community.cybozu.dev/t/topic/5051/2 "2021-07-02T07:44:50Z")

</div>

NS さん

こんにちは。

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

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2199](https://avatars.discourse-cdn.com/v4/letter/l/a88e4f/32.png) [@Legacy\_Account2199](https://community.cybozu.dev/u/Legacy_Account2199)\
**Post date:** [2021 年 7 月 3 日午前 1:27 UTC](https://community.cybozu.dev/t/topic/5051/3 "2021-07-03T01:27:51Z")

</div>

ひよこ様

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2025 年 5 月 1 日午前 7:33 UTC](https://community.cybozu.dev/t/topic/5051/4 "2025-05-01T07:33:02Z")

</div>

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