"Default Text" Fields Using Simple jQuery Trick

What would you suggest doing in a case where the field might not be filled by the user. Currently the text that is being put in the title attribute is posted back? I would imagine there has to be a way using jquery to remove it on submit, but this is my first day looking into what is possible with jquery.

I just found this plugin that removes the text prior to submit: http://plugins.jquery.com/project/ToggleFormText. I found it from a link in a Matt Berseth article http://mattberseth.c....xtboxwatermark.html.

I think the code would probably look something like:

onSubmit(foreach(".defaulttext"){
if (title of field = content of field){
content of field = ""
}
}

I don't really know javascript, but it can't be that difficult to figure out.

Awww... it lost its formatting...

And looking at the plugin, that is exactly what it was...

To clear the default text on submit:

<pre>
$("form").submit(function() {
$(".defaultText").each(function() {
if($(this).val() == this.title) {
$(this).val("");
}
});
});
</pre>

$("form_name").submit(function() {
$(".defaultText").each(function() {
if($(this).val() == $(this)[0].title) {
$(this).val("");
}
});
});

Yeah,

Its not removing the css class "defaultTextActive" if i use data picker of jquery

Hello,
on a page with multiple panels hiden and only one visible (wizard like), when I go back, the default text became none italic and none blur. So if i press the previous step button the default text looks like a regular one. In this case the (document).ready(function() not fired (it returns false so the (".defaultText").blur() is ignored). How could i call it?
Thanks.

Refresh or reload this page and it will break down the italic and blur.

If you are displaying error and setting values to the post values ... I used this to re-style the default text:
$.each($(".defaultText") ,function(){
if ($(this).val() == $(this)[0].title)
{
$(this).addClass("defaultTextActive");
}
});

.m,.m,.

FANTASTIC!!!
I've been hunting for something like this for days!
There is all sorts of different ways to skin this cat but working with multiple language and having the DEFAULT TEXT change too and load quickly was what I was looking for...and here it is!
Does someone know how to make the PASSWORD input field change from TEXT to PASSWORD on focus, remain PASSWORD if something is typed in but if nothing is typed in or it remains DEFAULT VALUE it returns to TEXT?
That would be pretty slick indeed!
Thanks.

I fixed the bug that removes the italic when we reload or go back to the page put the following source into the begging of the document.ready:

$(".defaultText").each(function(){
$(this).addClass("defaultTextActive");
$(this).val(jQuery(this)[0].title);
});

This also fixes it:
At the end of the document.ready put:

$(".defaultText").focus();
$(".defaultText").blur();

instead of just:

$(".defaultText").blur();

Might be a bit nicer because it uses the same functions (in case something changes in those functions).

By the way, I would come here more often if there were just banners instead of nasty popups.

I am using this code in one of the web-apps I am developing.

Thank you very much.

The following link from cloudgen is similar to the example, however it is wrapped by a jQuery function:
http://cloudgen.w0ng.hk/jquery/defaultText.php

I have one text default plugin for jquery and I think that is more simply to use.

http://www.jordigiro....cto-formularios.html

Here's a short plugin variant I use. It improves default detection when the entered text matches the title, it incorporates Alex's fix for form submission, and it allows reuse throughout a site.

jQuery.fn.defaultText = function() {
var self = this;
$('form').submit(function() {
$(self).each(function() {
var t = $(this);
if (t.val() == t.attr('title') && t.hasClass('default')) {
t.val('');
}
});
});
return $(this).blur(function() {
var t = $(this);
if (t.val() == '') {
t.val(t.attr('title'));
t.addClass('default');
}
}).focus(function() {
var t = $(this);
if (t.val() == t.attr('title') && t.hasClass('default')) {
t.val('');
t.removeClass('default');
}
}).blur();
};
$(document).ready(function() {
$('input[type="text"]').defaultText();
});

Note that the last 3 lines are an example of how to use the plugin.

Leave a Comment