Question

I have a simple form with three input text with a different value for each.
I want when I click inside at one to clear the deafult value and when I go out to put the default text into the input if the user doesn’t insert a text.
I have write a code in jQuery the problem is when I click out it takes the same default value of the first input type and not its text why?
This is the code:

<script type="text/javascript">
$(document).ready(function() {
    $('.testo').each(function() {
    var default_value = this.value;
        $(".testo").focus(function() {
            $(this).attr('value','');
        });
        $(".testo").blur(function() {
            if ($(this).attr('value')==''){
                $(this).attr('value',default_value);
            }
        });
    });
});

<p><input type="text" name="nome" class="testo"  value="Nome e Cognome"/> </p>
            <p><input type="text" name="telefono" class="testo" value="un tuo Recapito Telefonico"/></p>
            <p><input type="text" name="email"  class="testo" maxlength="60" value="una E-Mail Valida"/></p>

Answer 1

your javascript isn’t using the same value each time you bind the focus and blur events. so these will always bind to the last in the each, try:

$(document).ready(function() {
    $('.testo').each(function() {
    var default_value = this.value;
        $(this).focus(function() {
            $(this).val('');
        });
        $(this).blur(function() {
            if ($(this).val()==''){
                $(this).val(default_value);
            }
        });
    });
});