easierbycode
3/12/2012 - 6:27 PM

IE placeholder polyfill

IE placeholder polyfill

# -= styling =-

# li label.over
#   margin-top: 16px
#   margin-left: 9px
#   color: #777

# input[type="text"]:active, input[type="password"]:active
#   color: black


# -= jQuery plugin =-

$.fn.textHint = ->
  @each ->
    $input = $(this)
    defaultValue = $input.val()
    label = $("<label>").text($input.attr("placeholder"))
    $input.before label
    if label and $input.val() is ""
      label.parent().css "position", "relative"
      label.addClass("over").click ->
        $input.focus()
    else
      label.hide()
    $input.focus ->
      if $input.val() is defaultValue
        $input.val ""
        label.css textIndent: -10000

    $input.blur ->
      if defaultValue and $input.val() is ""
        $input.val defaultValue
      else label.css textIndent: 0  if $input.val() is ""


# -= ready.coffee (requires Modernizr) =-

$(document).ready ->
  unless Modernizr.input.placeholder
    $("[placeholder]").textHint()