Browser Fallbacks

Immer wieder kämpft man mit Features die nicht von allen Browsern unterstützt werden. Es gibt verschiedene Wege Fallbacks für solche Dinge zu implementieren. Eine große Hilfe kann Modernizr sein. Manchmal ist es besser (aus Zeitgründen und um JavaScript Overkill zu verhindern. Einfach gleich eine kleine JS Lösung zu Implementieren.

Links

Browserfeatures mit Modernizr testen

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills (für viele Fälle Plugins etc. vorhanden)

Snippets

Placeholder imitieren

Placeholdr jQuery Plugin

https://github.com/vote539/placeholdr

Minimized

// Placeholdr, Copyright (c) 2013 Shane Carr
// https://github.com/vote539/placeholdr
// X11 License
(function(b,c,e,d){var g=function(){var a=b(this);a[d]()||(a.addClass(c),"password"===a.attr("type")&&(a.attr("type","text"),a.data(c+"-pwd",!0)),a[d](a.attr(e)))},h=function(){var a=b(this);a.removeClass(c);a.data(c+"-pwd")&&a.attr("type","password");if(a[d]()===a.attr(e))a[d]("")},k=function(){b(this).find("["+e+"]").each(function(){b(this).data(c)&&h.call(this)})};b.fn.placeholdr=function(){if(e in document.createElement("input"))return this;b(this).find("["+e+"]").each(function(){var a=b(this);
a.data(c)||(a.data(c,!0),g.call(this),a.focus(h),a.blur(g))});b(this).find("form").each(function(){var a=b(this);a.data(c)||(a.data(c,!0),a.submit(k))});return this};b.fn[d]=b.fn.val;b.fn.val=function(a){var f=b(this);if("undefined"===b.type(a)&&f.data(c)&&f[d]()===f.attr(e))return"";(f="string"===b.type(a))&&h.call(this);var k=b.fn[d].apply(this,arguments);f&&!a&&g.call(this);return k};b(function(){b(document).placeholdr()});document.write("<style>.placeholdr{color:#AAA;}</style>")})(jQuery,"placeholdr",
"placeholder","placeholdrVal");