当访问者在剪贴板上复制内容时如何自定义警报

Question

如何在访问者浏览器中自定义警告对话框 web 共享 API 方法不起作用。

<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>

我想创建类似于大多数 android 应用程序的东西，用于在复制任何文本后显示通知，该文本会在一秒钟内自动消失。

有没有什么方法可以在网络浏览器时自动将按钮文本从 "Click to Share" 更改为 "Click to Copy"不支持 Web Share API 方法。

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

Answer 1

您可以创建一个您想要的样式的隐藏元素，并在复制 1 秒后显示它

第二部分：使用此更改按钮文本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>

当访问者在剪贴板上复制内容时如何自定义警报

How to customise alert when visitors copy something on clipboard

javascript

share

blogger

android-sharing