JavaSctipt

コピーボタン

  /

◎html

<table class="cform">
<tbody>
<tr>
<th>入力欄</th>
<td>
    <textarea id="review" class="soudan" cols="50" rows="10" placeholder="入力してください"></textarea>
    <button type="button" class="copy-button" onclick="copyText()">コピー</button>
</td>
</tr>
</tbody>
</table>


<div>
<script>
    function copyText() {
        var textarea = document.getElementById("review");
        textarea.select();
        textarea.setSelectionRange(0, 99999); // テキストを選択
        document.execCommand("copy"); // テキストをクリップボードにコピー
        alert("テキストがコピーされました: " + textarea.value);
    }
</script>
</div>

 

◎footer.php

<script>
    document.addEventListener('DOMContentLoaded', function() {
        function copyText() {
            var copyText = document.getElementById("copy-text");

            // テキストを選択
            copyText.select();
            copyText.setSelectionRange(0, 99999); // モバイルデバイス用

            // クリップボードにコピーする
            navigator.clipboard.writeText(copyText.value).then(function() {
                alert("テキストがコピーされました: " + copyText.value);
            }, function(err) {
                console.error('クリップボードにコピーできませんでした: ', err);
            });
        }

        var copyButton = document.querySelector('.copy-button');
        if (copyButton) {
            copyButton.addEventListener('click', copyText);
        }
    });
</script>
RELATED POST