Jquery從焦點上的聯繫表單中刪除標籤

Question

我需要我的聯繫表單幫助。我試圖在用戶點擊框時自動刪除標籤，但我似乎無法弄清楚如何。

這是HTML

<div class="six columns"> 
    <form> 
     <div class="row"> 
      <div class="six columns"> 
       <label class="gfield_label" for="Name" style="display: block;">Name<span class="gfield_required">*</span> 
       </label> 
       <input type="text" id="Name" required class="mobile-four" /> 
      </div> 
      <div class="six columns"> 
       <label class="gfield_label" for="Name" style="display: block;">Company</label> 
       <input type="text" id="Name" required class="mobile-four" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="six columns mobile-four"> 
       <label class="gfield_label" for="email" style="display: block;">Email<span class="gfield_required">*</span> 
       </label> 
       <input type="email" class="mobile-four" id="email" required /> 
      </div> 
      <div class="six columns mobile-four"> 
       <label class="gfield_label" for="phone" style="display: block;">Phone<span class="gfield_required">*</span> 
       </label> 
       <input type="phone" class="mobile-four" id="phone" required /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="twelve columns mobile-four"> 
       <label class="gfield_label" for="message" style="display: block;">Message<span class="gfield_required">*</span> 
       </label> 
       <textarea id="message" cols="30" rows="3"></textarea> 
      </div> 
      <div class="three columns centered"> 
       <button id="contact-submit-btn" class="btn btn-block btn-danger">Contact us Now!</button> 
      </div> 
     </div> 
    </form> 

</div> 

，這是迄今爲止我已經嘗試了JS。但似乎沒有任何工作。

$('input, textarea').focus(); 
    $(this).prev('label').hide(); 
}); 


$('.gfield_label').focus(function() { 
    $('label.mobile-four[for="' + $(this)[0].id + '"]').hide(); 
}); 

$('.gfield_label').each(function() { 
    2 
    var elem = $(this); 
    3 
    $('label[for="' + $(this).attr('id') + '"]').click(function() { 
     4 
     elem.focus(); 
     5 
    }); 
    6 
    if ($(this).val() != '') { 
     7 
     $('label[for="' + $(this).attr('id') + '"]').hide(); 
     8 
    } 
    9 
}).focus(function() { 
    10 
    $('label[for="' + $(this)[0].id + '"]').hide(); 
    11 
}).blur(function() { 
    12 
    if ($(this).val() == '') { 
     13 
     $('label[for="' + $(this)[0].id + '"]').show(); 
     14 
    } 
    15 
}).change(function() { 
    16 
    if ($(this).val() != '') { 
     17 
     $('label[for="' + $(this)[0].id + '"]').hide(); 
     18 
    } 
    19 
}) 

如果有人能幫上忙，那會很好。該網頁是在beta.harbordev.com/contact.html

非常感謝

UPDATE !!!!!

$(function() { 
    $('input, textarea').on('focus blur', function() { 
     $(this).prev().toggle(); 
    }); 
}); 

此建議類型工作。它現在在網站上，但不知怎的，消息字段（textarea）總是隨着其他選擇而消失，並且在沒有選擇任何東西時也消失。有人知道爲什麼嗎？

Answer 1

$(function() { 
    $('input, textarea').on('focus blur', function() { 
     $(this).prev().toggle(); 
    }); 
}); 

FIDDLE

Answer 2

你可以試試下面的代碼：

Working Deom

$('input, textarea').focus(function(){ 
     $(this).prev('label').hide(); 
}); 

Answer 3

試試這個：

$('input, textarea').keyup(function(){ 
if($(this).val()=="") 
     $(this).prev('label').show(); 
else 
     $(this).prev('label').hide(); 
}); 

Working Demo

Answer 4

這是我想出了。我假設你試圖在值存在時隱藏標籤，如果它不存在，它會再次顯示。

這不依賴於你的HTML結構，如果你沒有處理一致的標記，這是很好的。

var $inputs = $(':input'), 
    $labels = $('label'); 

$inputs.on('input blur focus', function() { 

    var $input = $(this), 
     value = $input.val(), 
     id = $input.attr('id'), 
     $label; 

    $label = $labels.filter(function(){ 
    return $(this).attr('for') === id; 
    }); 

    $label.toggle(value.length === 0); 

}).trigger('input'); 

，這裏是一個小演示：http://jsbin.com/jigucuna/4/edit?html,js,output

PS：你可能想看看進入placeholder屬性爲好。