Skip to content

Instantly share code, notes, and snippets.

@Narga
Created June 7, 2012 02:49
Show Gist options
  • Save Narga/2886259 to your computer and use it in GitHub Desktop.
Save Narga/2886259 to your computer and use it in GitHub Desktop.
jQuery - Form's Inline Label
//http://www.narga.net/making-awesome-forms-inline-labels-with-jquery
$(document).ready(function() {
$.fn.setCursorPosition = function(pos) {
if ($(this).get(0).setSelectionRange) {
$(this).get(0).setSelectionRange(pos, pos);
} else if ($(this).get(0).createTextRange) {
var range = $(this).get(0).createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
$("#signup label").each(function (i) {
$(this).next("input").attr("value",$(this).html()+"..."
$(this).hide();
});
$("#signup input").focus(function() {
if($(this).prev("label").html()+"..." == this.value){
$(this).addClass("focus").setCursorPosition(0);
}
});
$("#signup input").keypress(function() {
if($(this).prev("label").html()+"..." == this.value){
this.value = "";
$(this).removeClass("focus").addClass("typing"
}
});
$("#signup input").blur(function() {
$(this).removeClass("focus").removeClass("typing"
if(this.value == ""){
this.value = $(this).prev("label").html()+"...";
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment