如果输入包含值，Jquery将隐藏标签

Jquery hide label if input contains value

本文关键字：隐藏 标签 Jquery 输入 包含值 如果      更新时间：2023-09-26

我使用以下代码通过Jquerys onBlur和Focus在表单中隐藏和显示标签。

除了显示其中一个输入中何时有值的标签外，其他一切都正常工作。(当验证失败时，我会使用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();
});

为什么不使用之类的东西

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

在未验证语法的情况下键入此。

重新定位

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

带有

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

$(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"，如果模糊上有值，则隐藏标签。

所有这些编码都可以简化为：

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")

祝你好运！

相关文章：