ادراج كود نسخ للحافظة أو Copy to clipboard فى صفحة html

شرحنا النهاردة باذن الله عن كيفية ادراج كود نسخ للحافظة فى موقعك او صفحة ويب

الكود سهل جدا جدا وهو بالجافاسكربت (js)

هيا نرى الكود ده كود الجافاسكربت

<script> function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); document.execCommand("copy"); var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copied: " + copyText.value; } function outFunc() { var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copy to clipboard"; } </script>

شرح الكود

document.getElementById("myInput");

myInput ده ايدى العنصر الذى يحتوى النص سواء text او textarea document.getElementById("myTooltip");

myTooltip اى دى العنصر اللى هيظهر فوقه تلميح بانه تم النسخ وده ممكن نستنغنى عنه أضقته للتوضيح ليس الا

نجرب الكود على ارض الواقع

<input type="text" value="dmaghi.com" id="myInput"> <div class="tooltip"> <button onclick="myFunction()" onmouseout="outFunc()">Copy</button> <span class="tooltiptext" id="myTooltip">Copy to clipboard</span> </div> <script> function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); document.execCommand("copy"); var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copied: " + copyText.value; } function outFunc() { var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copy to clipboard"; } </script>

كود التنسيق بـ css

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

النتيجة هتكون شبيهة لهذه الصورة

الى هنا ينتهى درس اليوم والى اللقاء فى درس اخر باذن الله