# ## 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:
Comments (Atom)