Semantically Correct Backwards compatible placeholders.

placeholders.coffee

# Created By Ramiro Jr. Franco for Crowdcompass
# http://ramiro.mx || http://www.crowdcompass.com
# Requires Modernizr with placeholder support - http://www.modernizr.com
#
# Essentially, I wanted a way to keep the nice <labels> in markup, but apply the
# placeholder styles in all browsers. This has been tested with FF 6+, Chrome 14+,
# IE7,8,9, and Safari 4+. When a browser does support the HTML5 placeholder it just
# kills the label and applies the placeholder attribute based on the Label text,
# otherwise it actually applies a method to the input to switch out the the value on
# focus / blur. For passwords it hides/shows a separate input field to retain
# compatibility with IE7 and IE8.

$ ->
  applyInlineLabels()

applyInlineLabels = () ->
  psuedoPlaceholder = (input) ->
    if input.attr('type') == 'password'
      clear_input = "<input type=\"text\" class=\"password-clear\" value=\"#{input.data('placeholder')}\" />"
      input.hide()
      input.before(clear_input)
      input.prev('.password-clear').focus( ->
        $(this).hide()
        input.show()
        input.focus()
      )
      input.blur( ->
        if input.val() == ''
          input.hide()
          input.prev('.password-clear').show()
      )
    else
      input.focus( ->
        if input.val() == input.data('placeholder')
          input.val('')
      ).blur( ->
        if input.val() == ''
          input.val(input.data('placeholder'))
      ).blur()
  
  $('input[type=text], input[type=password]').each( ->
    label = $(this).parent().prev('label')
    label_text = label.text()
    if Modernizr.input.placeholder
      $(this).attr('placeholder', label_text)
      label.remove()
    else
      $(this).data('placeholder', label_text)
      psuedoPlaceholder($(this))
      label.remove()
  )