# ## HTML5 placeholder feature fallback class class PlaceholderFallback constructor: (el) -> @el = $(el) @initialize() # HTML5 <input> placeholder feature detection browserHasPlaceholder: => "placeholder" of document.createElement("input") # Reads the placeholder attribute and uses it in a javascript fallback, if needed initialize: => if @browserHasPlaceholder() == false placeholderText = @el.attr 'placeholder' @el.removeAttr 'placeholder' @el.val(placeholderText) @el.focus (e) -> if this.value == placeholderText this.value = '' @el.blur (e) -> if this.value == '' this.value = placeholderText else @el = null # Usage: placeholderFallback = new PlaceholderFallback( element )
A collection of handy code snippets in the languages that I use on a daily basis.
January 5, 2012
Coffeescript: HTML5 <input> placeholder attribute fallback
You want to use the new HTML5 placeholder attribute on input fields, but you also want to support older browsers. Here's a little Coffeescript class that takes an HTML element in the constructor, and uses jQuery to bind the focus and blur events to swap out text like a modern browser would without the script.
Labels:
blur,
coffeescript,
detection,
event,
fallback,
focus,
input,
javascript,
jquery,
js,
placeholder
Subscribe to:
Posts (Atom)