点击复制文本并在之后显示小弹窗——扩展代码

Question

点击复制文本并在之后显示小弹窗——扩展代码

3

我可以帮您翻译以下内容，涉及IT技术相关。"Original Answer" 可以翻译为 "最初的回答"。以下是需要翻译的内容（请保留HTML标签）：

我需要一个小脚本，允许我在点击时复制文本字符串而无需按钮。

我找到了这段代码：

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> - 这是它识别要复制的代码的方式。请帮忙改进。

"Original Answer"翻译成中文是"最初的回答"。

- kacper3355

请确保将您的复制函数插入为JavaScript，而不是PHP。 - undefined

这里的代码是Javascript，jquery的functions.php用于定义PHP函数。这两种语言不兼容，因此会出现语法错误。Javascript需要添加在网站HTML的<script>标签中，或者在一个.js文件中，并在HTML中引用，类似于<script src="myScript.js"></script>。 - undefined

请更新您的问题，包括您的functions.php文件的内容，这样我们才能帮助您调试。听起来您只是将那段代码粘贴到了那里，这可能解释了您所看到的错误，但除非我们看到代码，否则无法确定。 - undefined

谢谢大家，我错了。我把代码粘贴到single.php文件中的<script>标签中，它完美地运行了。现在我只需要修改代码来显示我提到的弹出窗口。有人有任何想法如何实现吗？ - undefined

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Conan · Answer 1

我希望这个函数能对你有所帮助：

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

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

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

记住，你必须创建一个标签，在输入标签旁边显示消息。

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

- Conan · Answer 3

嘿，这是第一个问题，但我不明白第二个问题是什么。

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);//
}

<input type="text" onclick="copy(this)" value="click me"></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>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>