HTML Onchange / OnBlur التوافق

Question

أكتب حاليا موقعا على شبكة الإنترنت يجب أن يكون متوافقا مع جميع المتصفحات بما في ذلك أي مرة أخرى إلى الإصدار 6.

كنت أتساءل عن مشكلات التوافق مع هذين الحدثين على وجه الخصوص: أنا أستخدمها مع <input> علامة مع type='text'.

• على طمس
• على التغيير

وجد البحث استجابات مختلطة وقائمة غير كاملة.

على وجه التحديد، والسؤال هو:

• هل هناك أي مشكلات معروفة مع حدثين أعلاه (يمكن توسيعها إلى أحداث HTML الأخرى)؟
• إذا كان الأمر كذلك، فما هي الطرق التي يمكن استخدامها للتغلب على هذه المشكلات؟

أي مساعدة تقدير كبير :)

Answer 1

يجب أن تدعم جميع المتصفحات هذه الأحداث لائق تماما إذا كنت تستخدمها فقط في مربعات النص. إذا كنت تحقق من الجداول توافق حدث QuirksMode, ، سترى أن IE لديه بعض المشكلات مع حدث التغيير في أزرار الاختيار وخانات الاختيار.

إذا لم تكن معتادا على أحداث JavaScript في المتصفحات، فستجد أن نموذج الحدث هو فوضى بفضل حقيقة أن IE قررت أن تفعل أشياء بشكل مختلف عن المعيار. للتغلب على هذه المشكلة، يجب أن تستخدم إطار جافا سكريبت مثل jQuery., yui., دوجو, mootools., extjs., ، أو إنهاء. وبعد هذه الأطر سلسة الاختلافات حتى لا تضطر (تقريبا) أبدا إلى التعامل مع الاختلافات والبق في المتصفحات المختلفة. هنالك مقال عظيم على Codinghorror شرح لماذا يجب أن تفكر في استخدام إطار جافا سكريبت إذا كنت تخطط لاستخدام JavaScript في موقعك الذي يجب أن تقرأه إذا كنت فضوليا لماذا يجب عليك استخدام إطار جافا سكريبت.

أيضا، إذا كنت غير مألوف مع أحداث المتصفح تماما، فتأكد من فهمك الفرق بين onchange و onblur.

Answer 2

أعتقد أنه لا توجد مشكلة مع هذه الأحداث المحددة أكثر من جميع الأحداث في Internet Explorer بالإضافة إلى التشوهات الغريبة المعتادة مثل هذا.

الحل العام لمناولة الأحداث والعديد من المشكلات الأخرى هي استخدام إطار جافا سكريبت كذب مطوريهم دمائهم من دمائكم لإنقاذك، وأصابوا على كل شيء أي (وعدد قليل آخر) غريب، مثل دوجو. وبعد كما يقول الناس dojo في تلك الصفحة:

تعني كلمة "الدعم" شيئا محددا للغاية ل Dojo و Dijit، في هذا القول إن Dojo Core و Dijit يدعم المستعرض يعني أن 100٪ من الوظائف المتاحة تعمل، والتي تتم معالجتها بشكل صحيح، وأن جميع التدويل والتوحير مدعوم. هذا ال جداً شريط مرتفع، يعني أيضا أنه في حين أننا قد لا نقول أن المتصفحات مثل الأوبرا "مدعومة" بالنسبة إلى Dijit، فمن المحتمل جدا أن تعمل جميعها هناك أيضا، ولكن قد يكون هناك بعض التحذير الذي لم نكن قادرين على العمل عليه (مثل كما هوك إمكانية الوصول إلى الأوبرا).

المتصفحات التي يزعمون أنها "مدعومة" في هذا المستوى المرتفع للغاية (اعتبارا من Dojo 1.3.2) IE 6 إلى 8، Safari 3.1 إلى 4، Firefox 2 إلى 3.5، Chrome 1 إلى 2 (الوظائف الأساسية، بما في ذلك الحدث التعامل مع، يعمل أيضا على الأوبرا، كونيرو، FF 1.5، ...).

Answer 3

إذا كنت تستخدم JQuery، فجرب هذا:

$('input.text').click(function () {
        if (this.value == this.defaultValue) {
            this.value = '';
        }
    });
    $('input.text').blur(function () {
        if (this.value === '') {
            this.value = this.defaultValue;
        }
    });

$("input:text") إذا كنت ترغب في استهداف جميع حقول إدخال النص.