Change input field placeholder text with jQuery
I assume that everyone has seen these fancy input fields with some text in it like “Your e-mail here” and when you click on it, the text dissapears and reappears when focusing some other element on the page. This little feature gives forms a nice touch, makes them a bit more lively and attractive and is actually dead-simple to implement with jQuery JavaScript library.
jQuery(document).bind("ready", function(event) {
jQuery(".placeholder").each(function(element) {
var item = jQuery(element);
var text = element.attr("rel");
var form = item.parents("form:first");
if (item.val() === "") {
item.val(text);
}
item.bind("focus.placeholder", function(event) {
if (item.val() === text)
item.val("");
});
item.bind("blur.placeholder", function(event) {
if (item.val() === "")
item.val(text);
});
form.bind("submit.placeholder", function(event) {
if (item.val() === text)
item.val("");
});
});
});
// HTML
<input type="text" name="email" class="placeholder" rel="Your e-mail here"/>
This code matches any element with the class placeholder, tries to find a value from the tags rel="foobar" tag and then place it as the input field value.
Next it binds event handlers for focus, blur, submit events, which will even remove the placeholder text or set it as the value.
Form submit event is handled to empty out the input field in cases where the original value remains unchanged upon form submit.
Notice the usage of namespaced events to avoid unwanted handler collisions.
4 Comments
I have only just moved from prototype to jQuery (I have seen the light) and appreciate seeing an example like the above. But I think there are some bugs in the script.
First it looks like you changed your mind on whether to use the variable element or item and so the first use of item is an undefined access.
Second, the each function passes the element number in the parameter and one accesses the actual object through “this”.
It is also nice for the placholder text to be lighter than the normal entered text so I adding item.css(‘color’,’#888′) to the setting of the placeholder text and removing it when removing placeholder text makes a better user experience. Here is the revided script:
jQuery('.placeholder').each(function(i) {
var item = jQuery(this);
var text = item.attr('rel');
var form = item.parents('form:first');
if (item.val() === '')
{
item.val(text);
item.css('color', '#888');
}
item.bind('focus.placeholder', function(event) {
if (item.val() === text)
item.val('');
item.css('color', '');
});
item.bind('blur.placeholder', function(event) {
if (item.val() === '')
{
item.val(text);
item.css('color', '#888');
}
});
form.bind("submit.placeholder", function(event) {
if (item.val() === text)
item.val("");
});
});
});
great work! very easy to use, Thanks toby for the fix. works like a charming!
Please embed your script in a html code so that we can se in on the fly on your page. as a newbaby i does not make any sense to me your script…