0

I'm doing my final project for CS50 and I have a html page which creates a list of items using a "for" loop, and a button below it which has a "copy to clipboard" function.

It all seems to work great on my PC, but unfortunately it's just a dead button (the copying doesn't work) on the iPad and iPhone:

enter image description here

And since my web app is primarily designed to be used on the go, that's a bit of a problem!

Here's the html, including the script for the button:

{% block main %}
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h4>Shopping List</h4>
        <code class="list-group" id="myInput">{% for line in shopping_list %}{{ line.ingredient }} ({{ line.category }})<br>
{% endfor %}</code>
        <div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>
    </div>
    <script>
        function copyText(text) {
          navigator.clipboard.writeText(text);
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelector('.btn-clipboard').onclick = copyText(document.getElementById("myInput").textContent);   // Some code here
            });

    </script>
</div>
<div>
    <a class="btn btn-primary" href="/" role="button">Back to index</a>
</div>
{% endblock %}

My first thought was that maybe the navigator.clipboard.writeText(text) function wasn't supported by Safari, but that doesn't seem to be the case: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#clipboard_availability

Any idea what the issue could be? Any tips would be much appreciated!

You must log in to answer this question.

Browse other questions tagged .