jsでクリップボードにコピーが失敗する。android chrome

Question

<button onclick="copyString()">
コピー
</button>

copyString = function () {
let tempInput = document.createElement("textarea");
    tempInput.style.position = "absolute";
    tempInput.style.left = "-1999px";
    tempInput.style.right = "-1999px";
    tempInput.value = 'コピーしたい文章\nです\n';
    tempInput.setAttribute('xcontentEditable', true);
    tempInput.setAttribute('readOnly', false);
    document.body.appendChild(tempInput);

    window.getSelection().removeAllRanges();
    
    let useragent = window.navigator.userAgent.toLowerCase();
    if(useragent.indexOf('iphone os 12')) {
        let range = document.createRange();
        range.selectNode(document.querySelector('textarea'));
        let selection = window.getSelection();
        selection.addRange(range);
    } else {
        tempInput.setSelectionRange(0, 9999);
        tempInput.select();
    }
    
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}

上記のjsでwebサイト上でボタンクリックでクリップボードに文字をコピーする機能を作成したのですが

android chromeだとどうもコピーが上手く動作していないようです。
ブラウザ内だとペースト出来るのですが　メモ帳など他のアプリにペースト出来ません。

今までテストした環境例が以下です：

chrome 80.0.3987.132 Android 6.0.1
chrome 81.0.4044.138 Android 9

.setSelectionRange(0, 9999) と .select() を両方書いているのは文章のselect でコピーが失敗していると思っていたので書いてみましたがどうも原因は別のようです。

解決策をご存知の方がいればご教示いただければ幸いです。

Answer 1

時間は経ってしまいましたが一応解決というかある程度の機器で動くようになったので事後報告として書いておきます。

let copyString = function (value) {
    let tempInput = document.createElement("textarea");
    tempInput.style.position = "absolute";
    tempInput.style.left = "-1999px";
    tempInput.style.right = "-1999px";
    tempInput.value = value;
    tempInput.setAttribute('xcontentEditable', true);
    tempInput.setAttribute('readOnly', false);
    document.body.appendChild(tempInput);

    window.getSelection().removeAllRanges();

    let useragent = window.navigator.userAgent.toLowerCase();
    if(useragent.indexOf('android') !== -1) {
        asyncCopy(value);
        document.body.removeChild(tempInput);
        return;
    } else if(useragent.indexOf('iphone os 12') !== -1 || useragent.indexOf('iphone') !== -1) {
        let range = document.createRange();
        range.selectNode(document.querySelector('textarea'));
        let selection = window.getSelection();
        selection.addRange(range);
    } else {
        tempInput.setSelectionRange(0, 9999);
        tempInput.select();
    }

    document.execCommand("copy");
    document.body.removeChild(tempInput);
};

今コードを見て思うのは
document.execCommand("copy"); は成功したらtrue を返して失敗した場合 false を返すのでレスポンスを見て順番に色々の方法を試す処理が良さそうと思います。

また Clipboard API という document.execCommand("copy"); の変わりになる物があるようなので今から実装する場合はそちらも検討した方が良いかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/Clipboard_API