Help us understand the problem. What is going on with this article?

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

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

  • 動作確認したブラウザ
    • 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

やりたいこと

ボタンをクリックすると任意のテキストボックスにクリップボードにコピーしてあるテキストを張付けたい。
ボタンでテキストをコピーする方法はこちら

IEの場合だけ張付けができる

(参考)クリップボードを使ったコピーとペースト - Qiita

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

IE以外の場合は貼付けができない

Document.execCommandを試してみたけど張付けできない

MacのFireFox
a.gif

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

resultが「false」なので使えないのかもしれない。

返値
Boolean で、コマンドが対応していないか無効であれば false になります。
Document.execCommand() - Web API | MDN

Async Clipboard APIを試してみたけど張付けできない

Unblocking Clipboard Access  |  Web  |  Google Developers

MacのChrome
a.gif

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

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

クリップボードからの読み込み
"貼り付け"を使用するには"clipboardRead" permission が必要です。
クリップボードとのやりとり - Mozilla | MDN

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

  • Google Chrome
    1. [設定] > [詳細設定] > [プライバシーとセキュリティ] > [サイトの設定] > [クリップボード]
    2. 確認ダイアログを表示する場合: [クリップボード...(省略)...サイトに許可しない]をONにすると[クリップボードにコピーされているテキストや画像にサイトがアクセスする際に確認する(推奨)]に変わる
    3. [許可]の[追加]ボタンでサイトを登録する
    4. スクリーンショット 2019-11-24 13.21.05.png

MacのChrome
a.gif

使った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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした