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隐藏标签，如果输入包含值

回答

相关问题