Fork me on GitHub
jQuery Placeholder Label
a simple plugin placeholder attached with label
Compatibility browsers:

8+

2.0+

6+

5.1+

12.1+

6.0+

4.0+

Example

Using

HTML:

<input id="name" type="text" placeholder="Enter your name" alt="Name" value="Fábio Rogério SJ">
<input id="email" type="text" placeholder="Enter your email" alt="E-mail">
<input id="password" type="password" placeholder="Enter your password" alt="Password">

JavaScript:

$(document).ready(function (){
	$('input[placeholder]').placeholderLabel();
});

Doc

$('input[placeholder]').placeholderLabel({
    placeholderColor: "#898989", // Color placeholder
    labelColor: "#4AA2CC", // Color label (after the focus)
    labelSize: "14px" // Size of label (after the focus)
    useBorderColor: true, // If true a border input is altered after focus
    inInput: true, // If true the label is actually in half vertically
    timeMove: 200 // Time effect move after focus
});

If the value is atribuito after loading, you will need to call the method:

$('#email').val("fabio@fabio.com").placeholderLabel();

Download

https://github.com/fabiorogeriosj/jquery-placeholder-label

Author

Fábio Rogério SJ

GitHub: https://github.com/fabiorogeriosj

Twitter: https://twitter.com/fabiorogeriosj

Site: http://fabiorogeriosj.com.br