Jquery隱藏標籤，如果輸入包含值

我使用下面的代碼來隱藏和顯示我的形式與Jquerys onBlur和焦點的標籤。Jquery隱藏標籤，如果輸入包含值

除了顯示其中一個輸入中有值時的標籤，所有內容都有效。（我使用php在驗證失敗時將值輸入到我的輸入中，因此用戶不必重新輸入）

如何獲取以下代碼以檢查輸入是否有值，如果隱藏標籤並再次顯示當值爲空：

CSS

div#first-name, 
div#last-name, 
div#email-address, 
div#password 
{ 
    position:relative; 
    float:left; 
    margin-right:3px; 
} 
label.overlabel { 
    color:#999; 
} 
label.overlabel-apply { 
    position:absolute; 
    top:3px; 
    left:5px; 
    z-index:1; 
    color:#999; 
    padding-left:10px; 
    padding-top:10px; 
}

輸入：

<div id="first-name"> 
<label for="first-name-field" class="overlabel">First name</label> 
<input id="first-name-field" type="text" name="first_name" /> 
    </div>

的Javascript：

$(document).ready(function() { 



    // plugin definition 
    $.fn.overlabel = function(options) { 

     // build main options before element iteration 
     var opts = $.extend({}, $.fn.overlabel.defaults, options); 

     var selection = this.filter('label[for]').map(function() { 

      var label = $(this); 
      var id = label.attr('for'); 
      var field = document.getElementById(id); 

      if (!field) return; 

      // build element specific options 
      var o = $.meta ? $.extend({}, opts, label.data()) : opts; 

      label.addClass(o.label_class); 

      var hide_label = function() { label.css(o.hide_css) }; 
      var show_label = function() { this.value || label.css(o.show_css) }; 

      $(field). 
       parent().addClass(o.wrapper_class).end(). 
       focus(hide_label).blur(show_label).each(show_label); 

     //How to hide label if input contains value 

      return this; 

     }); 

     return opts.filter ? selection : selection.end(); 
    }; 

    // publicly accessible defaults 
    $.fn.overlabel.defaults = { 

     label_class: 'overlabel-apply', 
     wrapper_class: 'overlabel-wrapper', 
     hide_css:  { 'text-indent': '-10000px' }, 
     show_css:  { 'text-indent': '0px', 'cursor': 'text' }, 
     filter:  false 

    }; 

$(document).ready(function() { 
    $("label.overlabel").overlabel(); 
});

來源

2011-11-17 hairynuggets

http://stackoverflow.com/questions/1097522/check-existence-of-an-attribute-with-jquery使用JQuery檢查是否存在屬性。可能有幫助。 – orolo

你也許還會想，如果你還沒有做，使用'jquery.validate'做客戶端驗證，所以你可以保存回發 – Eonasdan

對於初學者，你使用TWO $（document）.ready（function（） {...我正在看jsFiddle中的其餘部分 –

爲什麼不使用類似

if ($(field).val() != ""){ 
    var fieldId = $(field).attr("id"); 
    $("label[for='"+fieldId+"']").hide(); 
}

鍵入此無需驗證語法。

來源

2011-11-17 16:22:48 AyKarsi

簡單而有效，謝謝 – hairynuggets

如果您想在用戶輸入文本後隱藏標籤字段，請使用keyup-handler，如[in這個答案]（http://stackoverflow.com/a/17967966/1991146） –

repalce

var show_label = function() { this.value || label.css(o.show_css)

與

var show_label = function() { field.value || label.css(o.show_css)

來源

2011-11-17 16:12:48 roselan

$(document).ready(function(){ 
    $('#form-id input').each(function() { if($(this).val().length > 0) $('#form-id label[for="' + $(this).attr('id') + '"]').hide(); 
$(this).change(function() { 
    if($(this).val().length > 0) 
     $('#form-id label[for="' + $(this).attr('id') + '"]').hide(); 
    else 
     $('#form-id label[for="' + $(this).attr('id') + '"]').show(); 
}); 
}); 

});

這可以幫助你，我已經通過輸入值搜查負荷，如果沒有價值隱藏與該輸入有關的標籤，並且還附加了事件「onChange」如果有模糊值，則隱藏標籤。

來源

2011-11-17 16:16:45

所有這些編碼可能只是已減少到這一點：

jQuery('#form-id input').blur(function() { 
    if ($(this).val() == '') 
     $(this).parents("div").find("label[for=" + this.id + "]").show().text(); 
}).focus(function() { 
    $(this).parents("div").find("label[for=" + this.id + "]").hide().text(); 
}); 

==> using this approach, make sure that label is 
    hard coded with "overlabel-apply" 

==> also, to have a whole form scope (in case you are not putting each 
    input in a div), change $(this).parents("div") to $(this).parents("#form-id")

祝你好運！

來源

2011-11-17 17:09:05

Jquery隱藏標籤，如果輸入包含值

回答

相關問題