CODEWITHSUNDEEP
jquery
Damiano
Damiano

Reputation: 1

How to remove default input text

I have:

<input type="text" id="nome" value="Nome..." />

I have to remove it, one time....when the focus will be on the input text.

I have to use jquery...

Thank you

Upvotes: 0

Views: 6711

Answers (3)

Hirvesh
Hirvesh

Reputation: 7982

I believe you need this plugin: http://www.aaronvanderzwan.com/focusmagic/

This plugin is meant to expedite the basic process of making form fields empty on focus and refill on blur, depending on a few specs. The three different scenarios that I have built for are represented here.

Scenario 1 This is represented by the first three fields on the right. This scenario is the normal one. We want the label to become a watermark.

Scenario 2 Often times with forms there is validation server side. This scenario loads a server sent value. This plugin doesn't do anything and lets the value set by the server work by it's self.

Scenario 3 Every once in a while we want an exception. Well scenario three (the 'ignored' textarea on the right) displays how this works. To not use the plugin on a specific label / field, simply add an 'ignore' class to it.

Upvotes: 0

Aron Rotteveel
Aron Rotteveel

Reputation: 83163

Simple answer:

$('#nome').focus(function() {
    $(this).val('');
});

Elaborated answer:

Although the above should work, it is not really friendly, since it will clear the field after you typed something in it as well. I usually do something like this:

$('input.clearonfocus').focus(function() {
    if (!$(this).data('originalValue')) {
        $(this).data('originalValue', $(this).val());
    }
    if ($(this).val() == $(this).data('originalValue')) {
        $(this).val('');
    }
}).blur(function(){
    if ($(this).val() == '') {
        $(this).val($(this).data('originalValue'));
    }
});

The advantage of the latter example is that it removes the value on focus, but does it only when you did not change the value.

Upvotes: 9

Jan Zyka
Jan Zyka

Reputation: 17898

Also note that you have new placeholder attribute for this purpose in HTML5. So in HTML5 enabled browsers this should be as easy as: <input type="text" placeholder="Nome..." />

You can check following link which enables you using the placeholder attributes even in browsers which are not HTML5 enabled:

Using HTML5 placeholder attribute in browser which don't support it via jQuery

Upvotes: 0

Related Questions