شرح أوامر oncopy oncut onpaste في جافاسكربت JavaScript الدرس |34| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الاثنين، 20 يوليو 2020

شرح أوامر oncopy oncut onpaste في جافاسكربت JavaScript الدرس |34|


أوامر النسخ و القص و اللصق

في بعض الاحيان إذا قام شخص ما بالنسخ او لصق او قص محتوى من موقعك و تريد تنفيذ أحد اوامر الجافاسكربت, سوف نشرح لكم هذه الطريقة, ويوجد لدينا 3 عناصر لهذا و هي :
oncopy    = copy  //عند النسخ
oncut     =cut    //عند القص
onpaste    =paste  //عند اللصق

للنسخ oncopy

توجد ثلاث طرق لهذا الأمر و هي :
الطريقة الأولى

<body>
    <h1 oncopy="copy()">تم نسخ النص</h1>
</body>

و في ملف الجافاسكربت
function copy(){
   alert("تم نسخ النص");
}


كما لاحظنا عند القيام بعملية نسخ للعنصر h1 الذي حددناه مباشرتاً تم تنفيذ أوامر الجافاسكربت و اعطانا ديالوك "تم نسخ النص".
أما إذا نريد نسخ جزء معين من الصفحة كاملة نضع امر oncopy ضمن الوسم body لتكون الأوامر على كامل جسم الصفحة أي كل ما نراه في الصفحة, ويكون هذا كالتالي
<body oncopy="copy()">
    <h1>تم نسخ النص</h1>
</body>

سنلاحط انه عند الضغط على اي نص من الصفحة سوف تتنفذ الأوامر, بعكس المثال الأول الذي كان فقط على جزء محدد من الصفحة وهو h1 عند نسخه تتنفذ الاوامر.

الطريقة الثانية
تتم عبر ملف الجافاسكربت في العنصر document.addEventListener كما بالمثال الآتي

document.addEventListener('copy',function coppy(){
    alert("تم نسخ النص")
})


ستكون النتيجة كما في المثالين في الأعلى, تعمل بنجاح عبر تنفيذ الأوامر الذي حددنا في الـ function عند القيام في النسخ.

إذا نريد تنفيذ الأوامر على عنصر محدد فقط نستخدم المتغيرات
سيكون هذا في ملف html
<body>
   <h1 id="text">Programmer Tech</h1>
</body> 

وفي ملف الجافاسكربت
var text = document.getElementById("text");
text.addEventListener('copy',function copy(){
    alert("تم نسخ النص");
})

هنا سوف تكون مثل نتيجة سابقاتها

الطريقة الثالثة
غالباً ما سوف نستخدم الـ method لأن الإصدارات الحديثة افضل بالتعامل معها
class MyPage{
    constructor() {
        var text = document.getElementById("text");
        text.addEventListener('copy',()=>{
            this.copy();
        });
    }
    copy(){
        alert("تم نسخ النص");
    }
}
onload = new MyPage();

أنشأنا كلاس بإسم MyPage و كونستركتر و من ثم انشأنا متغير text و ربطناه بالأيدي في html ثم اخترنا addEventListener و اعطينا الأوامر هي نسخ copy الذي تتنفذ و طريقة عرض البيانات هي عبر alert ديالوك منبثق و كل هذا يبدأ عند تحميل الصفحة.

للقص oncut

تستخدم بنفس طريقة النسخ فقط نغير الأوامر إلى oncut

ليكن في ملف html الوسم input مثلاً
<body>
   <input type="text" id="text"/>
</body>

وفي الجافاسكربت

class MyPage{
    constructor() {
        var text = document.getElementById("text");
        text.addEventListener('cut',()=>{
            this.copy();
        });
    }
    copy(){
        alert("تم قص النص");
    }
}
onload = new MyPage();

عند قص أي نص من الصفحة سوف تتنفذ الأوامر بشكل مباشر.


لتنفيذ الأوامر على كامل الموقع نضع document قبل addEventListener
class MyPage{
    constructor() {
        var text = document.getElementById("text");
        documnt.addEventListener('cut',()=>{
            this.copy();
        });
    }
    copy(){
        alert("تم قص النص");
    }
}
onload = new MyPage();

سيتم تنفيذ الأوامر هنا على كامل جسم الصفحة.

للصق onpaste

بنفس مبدأ عمليات النسخ و القص فقط تغيير الأمر لـ onpaste.

في ملف html
<body>
   <input type="text" id="text" onpaste="cut()"/>
</body>

في جافاسكربت
class MyPage{
    constructor() {
        var text = document.getElementById("text");
        text.addEventListener('paste',()=>{
            this.paste();
        });
    }
    paste(){
        alert("تم لصق النص");
    }
}
onload = new MyPage();

function cut(){
    alert("تم لصق النص");
}


لأي استفسار اذكروه في التعليقات او راسلونا عبر تلجرام

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام