Browser Fallbacks: Unterschied zwischen den Versionen
Aus Wikizone
Steff (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „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 dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| + | Veraltet - Siehe [[Browser - Hacks]] | ||
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. | 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. | ||
| Zeile 10: | Zeile 11: | ||
==== Placeholdr jQuery Plugin ==== | ==== Placeholdr jQuery Plugin ==== | ||
https://github.com/vote539/placeholdr | https://github.com/vote539/placeholdr | ||
| + | |||
| + | Minimized | ||
| + | <pre> | ||
| + | |||
| + | // 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"); | ||
| + | |||
| + | </pre> | ||
Aktuelle Version vom 6. Juli 2023, 07:32 Uhr
Veraltet - Siehe Browser - Hacks 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[Bearbeiten]
Browserfeatures mit Modernizr testen
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills (für viele Fälle Plugins etc. vorhanden)
Snippets[Bearbeiten]
Placeholder imitieren[Bearbeiten]
Placeholdr jQuery Plugin[Bearbeiten]
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");