لنتناول مختلف اﻷحداث التي ترافق تحديث المُعطيات.
الحدث: change
يقع الحدث change
عند تمام تغيّر العنصر.
بالنسبة للمُدخلات النصّيّة، ذلك يعني أنّ الحدث يقع عندما تفقد التركيز. على سبيل المثال، عند الكتابة في الحقل النصيّ أدناه، لا يكون هناك أيّ حدث. لكن عندما ننقل التركيز إلى مكان آخر، كالنقر على زرّ مثلا، سيكون لدينا الحدث change
:
<input type="text" onchange="alert(this.value)"> <input type="button" value="Button">
بالنسبة للعناصر الأخرى select
وinput type=checkbox/radio
، فإنّ الحدث يقع بعد تغيّر التحديد مباشرة:
<select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
الحدث: input
يقع الحدث input
كلّما غيّر المستخدم القيمة التي في المُدخل. وبخلاف أحداث لوحة المفاتيح، يقع هذا الحدث عند كلّ تغيّر في القيمة، حتى لو لم يكن ناجما عن أفعال لوحة المفاتيح، كاللصق بواسطة الفأرة أو استعمال التعرّف على الصوت لإملاء النصّ. على سبيل المثال:
<input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>
إذا أردنا معالجة جميع التغيّرات في <input>
فإنّ هذا الحدث هو الخيار اﻷمثل.
في المقابل، لا يقع input
عند أفعال لوحة المفاتيح أو غيرها من اﻷفعال التي لا تؤدّي إلى تغيّر القيمة، مثل الضغط على مفاتيح اﻷسهم ⇦
و⇨
في المُدخل.
ملاحظة: لا يمكن منع أيّ شيء في oninput
يقع الحدث input
بعد تغيّر القيمة، ولذا لا يمكننا استعمال event.preventDefault()
هناك -- قد فات الآوان، لن يكون لذلك أيّ أثر.
الأحداث: cut وcopy وpaste
تقع هذه اﻷحداث عند قصّ/نسخ/لصق قيمة ما، وهي تنتمي إلى الصنف ClipboardEvent، وتُمكّن من الوصول إلى المُعطيات التي قُصّت/أُلصقت. يمكننا أيضا استخدام event.preventDefault()
معها لإلغاء الفعل، فلا يتمّ بذلك نسخ/لصق أيّ شيء. على سبيل المثال، تمنع الشيفرة أدناه وقوع أيّ من هذه اﻷحداث، وتُظهر ماذا نحاول قصّه/نسخه/لصقه:
<input type="text" id="input"> <script> input.oncut = input.oncopy = input.onpaste = function(event) { alert(event.type + ' - ' + event.clipboardData.getData('text/plain')); return false; }; </script>
يُرجى التنبّه إلى أنّه لا يمكن نسخ/لصق النصّ فقط، بل أيّ شيء، مثل نسخ ملفّ في مدير الملفّات في نظام التشغيل، ولصقه. هذا لأنّ clipboardData
تتضمّن الواجهة DataTransfer
، التي تُستخدم في السحب والإفلات والنسخ/اللصق. تُعدّ هذه الأمور خارجة قليلا عن موضوعنا الآن، لكن يمكنك أن تجد التوابع الخاصّة بها في المواصفة. .
تنبيه: ClipboardAPI: قيود تتعلّق بسلامة المستخدم
الحافظة هي شيء "عموميّ" على مستوى نظام التشغيل. لذا فإنّ معظم المتصفّحات تمكّن من الوصول إلى الحافظة قراءة وكتابة لكن في نطاق بعض أفعال المستخدم فقط بداعي السلامة، كما في معالجات اﻷحداث onclick
مثلا.
ويُمنع كذلك توليد أحداث "مخصّصّة" للحافظة باستخدام dispatchEvent
في جميع المتصفّحات باستثناء Firefox.
الملخص
أحداث تغيير المعطيات:
الحدث | الوصف | الخصائص |
---|---|---|
change
|
عند تغيّر قيمة ما | بالنسبة للمُدخلات النصّيّة، يقع عند فقدانها التركيز. |
input
|
عند كلّ تغيّر في المُدخلات النصّية |
يقع مباشرة، على خلاف change .
|
cut/copy/paste
|
عند أفعال القصّ/النسخ/اللصق. |
يمكن منع الفعل، وتتيح الخاصّيّةُ event.clipboardData إمكانيّة القراءة من/الكتابة في الحافظة.
|
التمارين
حاسبة الإيداع
اﻷهميّة: 5
أنشئ واجهة تُمكّن من إدخال القيمة المودعة في البنك إضافة إلى النسبة، ثمّ تحسب كم ستصبح القيمة بعد مدّة مُعيّنة من الزمن. كما في المثال من هنا.
يجب أن يُعالج أيّ تغيّر في المُدخل مباشرة.
المعادلة هي كالتالي:
// القيمة الابتدائيّة للنقود :initial // تعني 0.05 مثلا، %5 سنويّا :interest // كم عاما من الانتظار :years let result = Math.round(initial * (1 + interest * years));
أنجز التمرين في البيئة التجريبيّة
الحل
افتح الحلّ في البيئة التجريبيّة
ترجمة -وبتصرف- للمقال Events: change, input, cut, copy, paste من سلسلة Browser: Document, Events, Interfaces لصاحبها Ilya Kantor
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.