Skip to content

Instantly share code, notes, and snippets.

@rjfranco
Created January 23, 2012 18:33
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rjfranco/1664711 to your computer and use it in GitHub Desktop.
Semantically Correct Backwards compatible placeholders.
# 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()
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment