回答履歴のコピー機能

ボタンを押したら回答履歴をコピーさせたかった

javascriptで簡単にできると思ったが、めちゃくちゃ手間取った

navigator.clipboard.writeText(res);

で簡単にコピーできるはずだったのに

自分のスマホではコピーされない。なぜ？なぜ？

iPhoneのsafariでは制限があるもよう・・・

自分のスマホはiPhoneだった（結果的によかった）

textareaにコピーしたい文字列をセットしてからコピー処理しないといけないらしい

コピーしたい文字列はAjaxでサーバーに問い合わせたとして

レスポンス返ってからの処理は

$('#copyText').show();

var el = document.getElementById('copyText');

el.value = res;

if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {

    var oldContentEditable = el.contentEditable,

    oldReadOnly = el.readOnly,

    range = document.createRange();

     

    el.contentEditable = true;

    el.readOnly = false;

    range.selectNodeContents(el);

   

    var s = window.getSelection();

    s.removeAllRanges();

    s.addRange(range);

     

    el.setSelectionRange(0, 999999);

     

    el.contentEditable = oldContentEditable;

    el.readOnly = oldReadOnly;

    document.execCommand('copy');

}else{

    if(navigator.clipboard){

    navigator.clipboard.writeText(res);

    }else{

        el.select();

        document.execCommand('copy');

    }

}

$('#copyText').hide();

いろいろなサンプル見たけど、

要素のcontentEditable、readOnlyの設定

や

コピーする文字の選択の仕方

は結構バラバラな説明で

結果的にこれらの手順を踏まないとコピーできなかった

コピーする文字列を設定するtextareaは動的に作ればいいと思ったが

それも事前に用意しておかないと反応してくれなかった

バージョンの問題もあるだろうし難しい

これを下のようにコピーするようにできました！

回答履歴

⬛⬛⬛⬛🟨

🟨⬛⬛⬛⬛

🟨⬛⬛⬛⬛

⬛⬛⬛🟨🟨🟨🟨

🟩🟩🟩🟩