حتماٌ سایتهای زیادی دیده اید که مثلاٌ برای کپی کد یا متن خاصّی، دکمه یا نمادی کنار نوشته دارند که با کلیک روی آن، نوشته یا کد مورد نظر در کلیپ برد سیستم ذخیره میشود.
در وردپرس افزونه های متعددی برای این کار هست، در این پست، دستور ایجاد کردن چنین بخشی در صفحات html مد نظر است.
این کار با کد زیر، انجام میشود:
<script>
function copy_text(){
navigator.clipboard.writeText("متنی که قرار است کپی شود");
alert('متن کپی شد');
}
</script>
در محل مورد نظر برای کپی نیز، این کد نوشته شود:
<a id="showCode" onclick="copy_text()">کپی</a>
در صورتی که بخواهید بخش کپی به صورت دکمه باشد، کد زیر را وارد نمایید:
<a onclick="copy_text()"><input type="button" value="کپی"></a>
نمونه کامل و البته آزمایشی:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function copy_text(){
navigator.clipboard.writeText("متنی که قرار است کپی شود");
alert('متن کپی شد');
}
</script>
</head>
<body>
<a id="showCode" onclick="copy_text()">copy</a>
</body>
</html>