Placeheld.coffee for js placeholders

placeheld.coffee

class window.Placeheld
  constructor: (element) ->
    @input = $(element)
    placeholder = @input.attr('placeholder')
    if placeholder && @input.attr('data-placeheld') != 'on'
      @input.attr('placeholder', '')
      @input.attr('data-placeheld', 'on')
      @input.siblings().add(@input).wrap('<div class="placeholding-input"/>')
      @input.after("<span class=\"placeholder\"> #{placeholder} </span>")
      @input.siblings('.placeholder').click(() =>
        @input.focus()
      )
      @input.keydown(() =>
        setTimeout( () =>
          if @input.val()
            @input.parent('.placeholding-input').addClass 'has-text'
          0)
      ).blur(() =>
        if !@input.val()
          @input.parent('.placeholding-input').removeClass 'has-text'
      )
window.Placeheld.init = () ->
 $('[placeholder]').map (index, element) ->
   new Placeheld(element)

placeheld.scss

.placeholding-input {
  overflow: visible;
  position: relative;
}

.placeholding-input .placeholder {
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  left:4px;
  z-index:1;
  height:20px;
  padding:4px;
  font-size:14px;
  line-height:20px;
  color:#999;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  white-space:nowrap;
  cursor:text;
  -webkit-transition:opacity .1s,font-size .1s;
  -moz-transition:opacity .1s,font-size .1s;
  -o-transition:opacity .1s,font-size .1s;
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
}
.placeholding-input input:focus + .placeholder {
  -moz-opacity:.6;
  opacity:.6;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter:alpha(opacity=60);
}
.has-content .placeholder, .has-text .placeholder {
  font-size:0!important;
  z-index:-1;
  -moz-opacity:0;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
}