Skip to content

Instantly share code, notes, and snippets.

@kvnn

kvnn/DJANGO_maiden_fields

Created April 4, 2012 16:39
Show Gist options
  • Save kvnn/2303667 to your computer and use it in GitHub Desktop.
Save kvnn/2303667 to your computer and use it in GitHub Desktop.
Download ZIP
Django: Make all text and password inputs show their label within their field, and blank when a user clicks on them.
Raw
Django Maiden fields
'''
This is a coffeescript file that when loaded will,
for all text and password inputs:
1. remove field label using .prev('label')
2. insert the label's text into the value of the field input
3. blank the field input when a user focuses on the field
'''
f = do ->
$ = jQuery
maiden_text = (e) ->
'''
Moves any labels into the input's val(),
hides label, blanks val() on user focus.
Works for passwords.
'e' is a jQuery 'input' element.
'''
e.each((i,e)->
label = $(e).prev('label')
if $(e).attr('type') == 'text'
# Text inputs
if label.text() != '' and ($(e).val() == '' or $(e).val() == label.text())
$(e)
.addClass('maiden')
.val(label.text())
.live('focus', ->
if $(this).hasClass('maiden')
$(this)
.removeClass('maiden')
.val('')
)
label.hide()
else if $(e).val != ''
label.hide()
else if $(e).attr('type') == 'password'
# Password Inputs
if label != '' and $(e).val() == ''
label.hide()
elem = $(e).clone()
elem
.removeAttr('id')
.removeAttr('name')
.attr('type', 'text')
.val(label.text())
.addClass('maidenPW')
$(e) # hide the password input and insert its text clone
.hide()
.after(elem)
else if $(e).val() != ''
label.hide()
$('.maidenPW')
# for some reason i can't chain .live to the $(e) above,
# so the following is kind of hacked in
.live('focus', ->
$(this).hide()
$(this).prev()
.show()
.focus()
)
)
return e
$( -> # document.ready
maiden_text($('input[type="text"]'))
maiden_text($('input[type="password"]'))
)
Raw
Django: Maiden fields
'''
This is a coffeescript file that when loaded will,
for all text and password inputs:
1. remove field label using .prev('label')
2. insert the label's text into the value of the field input
3. blank the field input when a user focuses on the field
maiden_text = (e) ->
'''
Moves any labels into the input's val(),
hides label, blanks val() on user focus.
Works for passwords.
'e' is a jQuery 'input' element.
'''
e.each((i,e)->
label = $(e).prev('label')
if $(e).attr('type') == 'text'
# Text inputs
if label.text() != '' and ($(e).val() == '' or $(e).val() == label.text())
$(e)
.addClass('maiden')
.val(label.text())
.live('focus', ->
if $(this).hasClass('maiden')
$(this)
.removeClass('maiden')
.val('')
)
label.hide()
else if $(e).val != ''
label.hide()
else if $(e).attr('type') == 'password'
# Password Inputs
if label != '' and $(e).val() == ''
label.hide()
elem = $(e).clone()
elem
.removeAttr('id')
.removeAttr('name')
.attr('type', 'text')
.val(label.text())
.addClass('maidenPW')
$(e) # hide the password input and insert its text clone
.hide()
.after(elem)
else if $(e).val() != ''
label.hide()
$('.maidenPW')
# for some reason i can't chain .live to the $(e) above,
# so the following is kind of hacked in
.live('focus', ->
$(this).hide()
$(this).prev()
.show()
.focus()
)
)
return e
$( ->
maiden_text($('input[type="text"]'))
maiden_text($('input[type="password"]'))
)
Raw
DJANGO_maiden_fields
'''
This is a coffeescript file that when loaded will,
for all text and password inputs:
1. remove field label using .prev('label')
2. insert the label's text into the value of the field input
3. blank the field input when a user focuses on the field
maiden_text = (e) ->
'''
Moves any labels into the input's val(),
hides label, blanks val() on user focus.
Works for passwords.
'e' is a jQuery 'input' element.
'''
e.each((i,e)->
label = $(e).prev('label')
if $(e).attr('type') == 'text'
# Text inputs
if label.text() != '' and ($(e).val() == '' or $(e).val() == label.text())
$(e)
.addClass('maiden')
.val(label.text())
.live('focus', ->
if $(this).hasClass('maiden')
$(this)
.removeClass('maiden')
.val('')
)
label.hide()
else if $(e).val != ''
label.hide()
else if $(e).attr('type') == 'password'
# Password Inputs
if label != '' and $(e).val() == ''
label.hide()
elem = $(e).clone()
elem
.removeAttr('id')
.removeAttr('name')
.attr('type', 'text')
.val(label.text())
.addClass('maidenPW')
$(e) # hide the password input and insert its text clone
.hide()
.after(elem)
else if $(e).val() != ''
label.hide()
$('.maidenPW')
# for some reason i can't chain .live to the $(e) above,
# so the following is kind of hacked in
.live('focus', ->
$(this).hide()
$(this).prev()
.show()
.focus()
)
)
return e
$( ->
maiden_text($('input[type="text"]'))
maiden_text($('input[type="password"]'))
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment