How to customise alert when visitors copy something on clipboard

Question

How to customise alert dialogue box when in visitors browser web share API method not work. This is a link Questions with the post.

<script>
var title = document.title;
var url = window.location.href;

document.querySelectorAll('.shareBtn').forEach(function (btn) {
    var text = btn.previousElementSibling.textContent + '\n';
    btn.addEventListener('click', function () {
        if (navigator.share) {
            navigator.share({
                title: title,
                text: text,
                url: url
            });
        }else{
                var shareText = document.createElement('textarea');
                document.body.appendChild(shareText)
                shareText.value = text+url;
                shareText.select();
                document.execCommand('copy',false);
                shareText.remove();
                alert(" Text Copied");
            }
    });
});
</script>

I want to create something like most android app use to show notification after copy any text which disappears automatically in a second.

And is there any method to change automatically button text from "Click to Share" to "Click to Copy" when Web browser not support Web Share API method.

<button id="shareBtn">Click to Share</button>

Answer 1

You can create a hidden element with your desired style and show it after copying for 1 sec

The second Part: Change button text using this btn.textContent

HTML

<div class="alert-msg">Text Copied</div>

CSS

.alert-msg {
    position: fixed;
    padding: 10px 50px;
    border-radius: 4px;
    background-color: black;
    color: white;
    z-index: 1000;
    top: 50%;
    left: 50%;
    display: none;
}

JS

<script>
//<![CDATA[
var title = document.title;
var url = window.location.href;
var msgDiv = document.querySelector('.alert-msg');

document.querySelectorAll('.shareBtn').forEach(function (btn) {
    if (!navigator.share) { btn.textContent = 'Click to Copy'; }
    var text = btn.previousElementSibling.textContent + '\n';
    btn.addEventListener('click', function () {
        if (navigator.share) {
            navigator.share({
                title: title,
                text: text,
                url: url
            });
        } else {
                var shareText = document.createElement('textarea');
                document.body.appendChild(shareText)
                shareText.value = text+url;
                shareText.select();
                document.execCommand('copy',false);
                shareText.remove();
                msgDiv.style.display = 'block';
                setTimeout(function () { msgDiv.style.display = 'none'; }, 1000);
            }
    });
});
//]]>
</script>