Skip to content

Instantly share code, notes, and snippets.

@rileytg
Last active Dec 27, 2015
Embed
What would you like to do?
Placeheld.coffee for js placeholders
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)
.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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment