wordpress 单击时复制文本，然后显示小弹出窗口-扩展代码

i7uaboj4 于 2022-11-22 发布在 WordPress

关注(0)|答案(3)|浏览(221)

我需要一个小脚本，将允许我复制文本字符串点击 * 没有按钮 *。
我找到了这个代码：

function copy(that){
var inp =document.createElement('input');
document.body.appendChild(inp)
inp.value =that.textContent
inp.select();
document.execCommand('copy',false);
inp.remove();
}

这段代码在点击时复制了一个文本，但它没有显示任何消息。我想修改一下，这样当用户点击文本时，它就会被复制，并显示一个小的弹出消息2-3秒（然后它会自行消失），说文本已经被复制到剪贴板。有人知道如何修改代码吗？
<p onclick="copy(this)">example text</p>-这就是它识别要复制的代码的方法。

wordpress

来源：https://stackoverflow.com/questions/55983215/copy-text-on-click-and-display-small-popup-afterwards-extending-the-code

3条答案

按热度按时间

a8jjtwal1#

我希望这个函数能帮助您：

copy(){
input  = $(this).val();
document.execCommand('copy',false,input);

$(this).next('text copied');

setTimeout(function(){$(this).next().remove();}, 2000);
}

请记住，u必须创建一个标记，其中u将在输入标记旁边显示消息

赞(0）回复(0）举报 2022-11-22

uttx8gqw2#

嘿有一个完整的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" onclick="copy(this)" value="malek gorchene"></input>
    <!-- this p is for the notification -->
    <p></p>

</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript">

    function copy(elem){
        input  = $(elem).val();
        elem.select();//Select the text in the input element 
        document.execCommand('copy');//copy it 

        $(elem).next().text('text copied');

        setTimeout(function(){$(elem).next().text('');}, 2000);//
    }

</script>
</html>

赞(0）回复(0）举报 2022-11-22

0yycz8jy3#

嘿，这是第一个问题，但我不明白第二个问题：
第一个

赞(0）回复(0）举报 2022-11-22