Question

当用户在输入文本框中输入文本时，尝试隐藏标签。

我在文本框中设置了带有绝对定位的标签，并成功地在文本框为:valid时使用css隐藏了标签。

但是，:valid在IE8中无效，因此我尝试编写一些jQuery以获得相同的效果。

注意：使用php自定义框架，所以我只是不能简单地为html元素添加属性。 JQuery是唯一的解决方案。

翻译过来，HTML：

<div>
   <label class="required" for="input1387821">First Name</label>
   <input name="data[Contact_Form][first_name]" required="1" value="" type="text" class="required-field required" id="input1387821">    
</div>

jQuery（我尝试过的）：

 $(document).ready(function(){
     $("input").focus(function(){ 
        var id = $(this).attr("id");

        $("#"+id).keyup(function(){
            if(($("label").attr("for")) == id)
            {                  
                //This label where the for attribute is equal to "id" .hide()            
            }

         })       
     })
 })

Answer 1

试试这个：

$(document).ready(function(){
     $("input").keyup(function(){
         if ($(this).val() !== '') {
             $('label[for="'+$(this).attr('id')+'"]').hide();
         } else {
             $('label[for="'+$(this).attr('id')+'"]').show();
         }
     });
});

demo

Answer 2

关于您发布的代码，您可以切换一个类，如：

$("input").on('keyup', function(){
    $(this).prev('label').toggleClass('hide', !!this.value);
});

CSS：

.hide {
    display: none;
}

隐藏特定属性的标签

2 个答案:

-DEMO-