ボタンでクリップボードからテキストボックスにコピー内容を貼付ける事ができなかった記録

注意 : このページでは「ボタンでクリップボードからテキストボックスにコピー内容を貼付ける」方法はわかりません。

- 動作確認したブラウザ
    - Windows10 Pro 64bit
        - GoogleC hrome 78.0
        - Fire Fox 70.0
        - Microsoft Edge 44.18362
        - Internet Explorer 11.418
    - MacOS Mojave 10.14.6
        - Google Chrome 78.0
        - Fire Fox 70.0
        - Safari 13.0

# やりたいこと
ボタンをクリックすると任意のテキストボックスにクリップボードにコピーしてあるテキストを張付けたい。
[ボタンでテキストをコピーする方法はこちら](https://qiita.com/ponsuke0531/items/0fdeeb7f9dcd9385278d)

# IEの場合だけ張付けができる
(参考)[クリップボードを使ったコピーとペースト - Qiita](https://qiita.com/butakoma/items/642c0ec4b77f6bb5ebcf#%E3%83%9A%E3%83%BC%E3%82%B9%E3%83%88)

```js
/** [貼付ける]ボタン押下処理. */
function onClickPaste() {
    let tagetId = 'pasteArea';
    let content = window.clipboardData.getData("Text");
    $(tagetId).val(content);
}
```

# IE以外の場合は貼付けができない
## `Document.execCommand`を試してみたけど張付けできない
MacのFireFox
![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/2acb2a96-9152-2aba-227a-dae8f46a5dca.gif)

```js
/** [貼付ける]ボタン押下処理. */
function onClickPaste() {
    let tagetId = 'pasteArea';
    $(tagetId).focus();
    let result = document.execCommand('paste');
    alert('張付けの結果:' + result);
}
```

`result`が「false」なので使えないのかもしれない。
> 返値
> Boolean で、コマンドが対応していないか無効であれば false になります。
> [Document.execCommand() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand)

## `Async Clipboard API`を試してみたけど張付けできない
[Unblocking Clipboard Access &nbsp;|&nbsp; Web &nbsp;|&nbsp; Google Developers](https://developers.google.com/web/updates/2018/03/clipboardapi#security_and_permissions)

MacのChrome
![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/0c023779-ebdb-786a-924c-27a7b9b19d4a.gif)


```js
/** [貼付ける]ボタン押下処理. */
function onClickPaste() {
    let tagetId = 'pasteArea';
    navigator.clipboard.readText().then((text) => {
        $(tagetId).val(text);
    });
}
```

## ブラウザで張付け許可を設定してみたが張付けできない

> クリップボードからの読み込み
> "貼り付け"を使用するには"clipboardRead" permission が必要です。
> [クリップボードとのやりとり - Mozilla | MDN](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard)

具体的にどうすればいいかは、はっきりわからないのでChromeでそれっぽい設定をしてみましたが張付けできませんでした。

- Google Chrome
    1. [設定] > [詳細設定] > [プライバシーとセキュリティ] > [サイトの設定] > [クリップボード]
    1. 確認ダイアログを表示する場合: [クリップボード...(省略)...サイトに許可しない]をONにすると[クリップボードにコピーされているテキストや画像にサイトがアクセスする際に確認する（推奨）]に変わる
    1. [許可]の[追加]ボタンでサイトを登録する
    2. ![スクリーンショット 2019-11-24 13.21.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/3796c808-f775-782b-e40c-bb8153c6136b.png)

MacのChrome
![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/a7b49fcf-314f-ca51-a4e3-df8eb4c19115.gif)


# 使ったHTML
```html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <title>貼付けをJavaScriptでやってみる</title>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>
    <script src="sample.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>貼付け場所</td>
            <td><input id="pasteArea" type="text"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" id="paste" value="貼付ける" onclick="onClickPaste();"></td>
        </tr>
    </table>
</body>
</html>
```