1

それぞれに異なる値を持つ3つの入力テキストを持つ単純なフォームがあります。内側をクリックしてデフォルト値をクリアし、外に出てユーザーがテキストを挿入しない場合はデフォルトのテキストを入力に入れたいと思います。jQueryでコードを記述しましたが、問題は、クリックすると、最初の入力タイプと同じデフォルト値を取り、テキストではないのはなぜですか？これはコードです：

<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>

4

3 に答える 3

1

フォーカス イベントとブラー イベントをバインドするたびに、JavaScript が同じ値を使用していません。したがって、これらは常に each の最後にバインドされます。試してください:

$(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);
            }
        });
    });
});
于 2012-07-30T10:50:32.890 に答える
0

作業デモ。

$(document).ready(function() {
    $('.testo').each(function() {
        var default_value = this.value;
        // you could do chain method to avoid call $(this) twice.
        $(this).focus(function() {
            $(this).val('');
        }).blur(function() {
            if ($(this).val() == ''){
                $(this).val(default_value);
            }
        });
    });
});​
于 2012-07-30T10:56:43.143 に答える