10

ユーザーが入力ボックスを選択すると値が消えますが、ユーザーがクリックするとデフォルト値が再挿入されるように、次のコードがあります。

        $(function() {
            var defaultText = '';
            $('input[id=input]').focus(function() {
                defaultText = $(this).val();
                $(this).val('');
            });
            $('input[id=input]').blur(function() {
                $(this).val(defaultText); 
             });
         });

しかし、それはまさに私が望む方法ではありません。ユーザーがテキストを挿入した場合、デフォルトのテキストでユーザーが入力した内容を上書きしたくありません。私はjQueryにもかなり慣れていないので、どんな助けでも大歓迎です。

4

3 に答える 3

20

メソッドでは、クリアする前にfocus()と等しいかどうかを確認する必要があります。関数では、 を設定する前に が空かどうかを確認するだけです。複数の入力を使用する場合は、ID ではなくクラスを使用することをお勧めします。そのため、セレクターはクラスが「入力」の場合になります。ID であっても、 として参照します。defaultTextblur()val()defaultTextinput.inputinput#input

// run when DOM is ready()
$(document).ready(function() {
    $('input.input').on('focus', function() {
        // On first focus, check to see if we have the default text saved
        // If not, save current value to data()
        if (!$(this).data('defaultText')) $(this).data('defaultText', $(this).val());

        // check to see if the input currently equals the default before clearing it
        if ($(this).val()==$(this).data('defaultText')) $(this).val('');
    });
    $('input.input').on('blur', function() {
        // on blur, if there is no value, set the defaultText
        if ($(this).val()=='') $(this).val($(this).data('defaultText')); 
    });
});

この jsFiddleで動作するように設定します。

于 2012-11-01T18:03:50.680 に答える
1

ぼかしハンドラーで、ユーザーが何も書いていないかどうかを確認します。その場合は、次のようにデフォルトのテキストに戻します。

         $('input[id=input]').blur(function() {
            if ($(this).val() == '') {
                $(this).val(defaultText); 
            }
         });
于 2012-11-01T18:04:48.977 に答える