Question

我需要一个小脚本，该脚本允许我单击而无需按钮来复制文本字符串。

我找到了以下代码：

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>-这就是它识别要复制哪些代码的方式。

Answer 1

希望此功能对您有帮助：

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

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

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

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

Answer 2

嘿，有一个完整的例子：

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

Answer 3

嘿，这是第一个问题，但我没有第二个问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" onclick="copy(this)" value="malek gorchene"></input>
    <p></p>
    <p onclick="copy(this)">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <!-- 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){
        if($(elem).text()){
            var dummy = document.createElement("textarea");
            document.body.appendChild(dummy);
            dummy.value = $(elem).text();
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);
        }else{
            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>

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

3 个答案: