jquery - jQueryでテキストエリアの上に配置されたラベルを削除する

Question

私は現在label、テキストエリア内に絶対配置されている を持っています。

私は次の作業を取得しようとしています:

をクリックtextareaすると、 がlabel消えます。の外側をクリックしたらtextarea、追加したコンテンツがあるかどうかを確認します。そうでない場合は、背中を置きlabelます。はいの場合は、そのままにしておきます。

jsFiddle はこちらです。

で試してみましたが、クリック$('html').click()に干渉するようです。textarea

Answer 1

フォーカスとぼかしが必要ですWorking Demo : http://jsfiddle.net/tDHwZ/10/

 $('#comment').focus(function() {
            $(this).prev().hide()  
        });
 $('#comment').blur(function() {
            if($(this).val()=='')
           $(this).prev().show()  
        });

Answer 2

この状況では、.click()イベントを.blur () に置き換えることで、期待どおりの結果が得られるはずです。

以下のリンクで確認できます。

http://jsfiddle.net/tDHwZ/27/

$(document).ready(function() {

    $('#comment').blur(function() {

        if($('#comment').val()!= "") {
           $('label[for=comment]').addClass('hidden');    
        } else {
           $('label[for=comment]').removeClass('hidden');                
        }



        if($('label[for=comment]').hasClass('hidden')) {
            $('label[for=comment]').hide();

        } else {
            $('label[for=comment]').show();
        }
    });

});

Answer 3

HTML5 を使用している場合は、確かにプレースホルダー属性がこれを処理します。または、HTML5 でない場合は、これが役立つかもしれませんhttp://trevordavis.net/blog/jquery-inline-form-labels