web-dev-qa-db-ja.com

jQuery入力値のフォーカスとぼかし

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

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

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

javascriptjqueryfocusblurplaceholder
10
Karl

focus()メソッドでは、クリアする前にdefaultTextと等しいかどうかを確認する必要があります。blur()関数では、val()は、defaultTextを設定する前は空です。複数の入力を処理する場合は、IDではなくクラスを使用することをお勧めします。そのため、クラスが「入力」の場合、セレクターはinput.inputになります。 IDであっても、input#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')); 
    });
});

this jsFiddle で実行中に設定します。

20
doublesharp

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

         $('input[id=input]').blur(function() {
            if ($(this).val() == '') {
                $(this).val(defaultText); 
            }
         });
1
Nelson

古い質問+人々が私の問題を修正するのではなく別の解決策を提供する場合は嫌いですが、それでもなお、jQueryプラグインでHTMLプレースホルダー属性を使用すると問題が解決します。

HTML data-属性を使用して、そこから書き込み/読み取りを行うこともできます。

0
Wancieho