清除字段值后显示标签

Question

<form>
    <div class="fieldWrap">
           <label for="jobnamesurname">Name &amp; Surname</label>
           <input type="text" id="jobnamesurname" name="Name &amp; Surname">
    </div>
    <div>
        <input type="reset" name="reset">    
        </div>        
</form>

这是我的 fiddle link

一切正常，只有一件事 - 当你写一些东西然后点击清除时，没关系，但在此之后当你尝试写一些东西时标签仍然存在并且值和标签都显示，我想摆脱本期.3.

我不能只使用占位符属性，因为它在 IE9 上不起作用。

Answer 1

我认为这两个问题都可以使用 Placeholders.js Plugin 来解决。它重量轻，易于使用，除了适用于 IE6 及更高版本外，其工作方式与占位符属性类似。

Answer 2

怎么样this

jQuery(".clearField").click(function(){
    var inputVal = jQuery(".fieldWrap input").val();
    if(inputVal != ''){
        jQuery(".fieldWrap input").val('');
        jQuery(".fieldWrap").removeClass('placeholder-hide');
    }
});

Answer 3

好吧，我刚刚更新了你的 fiddle，似乎有效

jQuery(".clearField").click(function(){
    var inputVal = jQuery(".fieldWrap input").val();
    if(inputVal != ''){
        jQuery(".fieldWrap input").val('');
        //jQuery(".fieldWrap").addClass('showPlText');
        jQuery(".fieldWrap input").blur();
    }
});

Answer 4

http://jsfiddle.net/BB3JK/951/

 jQuery(".clearField").click(function(){
   jQuery(".fieldWrap input").val('');
   jQuery('.fieldWrap > input').blur();  

});

Answer 5

$(function() {  
  $("#input_1").focus(function() {
    $("#label_1").hide(0);
  });
  
  $("#input_1").blur(function() {
    if (!$(this).val()) {
      $("#label_1").show(0); 
    }
  });
  
  $("#reset").click(function() {
    $("#input_1").val("");
    $("#input_1").blur();
    $("#label_1").show(0);
  });
});

/* style the input */
.input_text {
  position : absolute;
  left : 0;
  width : 150px;
  z-index : 1;
  background : transparent;
  outline: none;
  border: 1px solid #0b4b84;
  color: #666666;
  text-align: center;
  width: 100%;
  font-size: 16px;
  float: left;
  padding: 8px;border : solid 1px black;
}


/* style the label "placeholder" */
.label {
  position : absolute;
  left : 0;
  z-index : 0;
  width : 150px;
  width: 100%;
  margin-bottom: 5px;
  font-weight: normal;
  text-align: center;
  color: #666666;
  font-size: 15px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 38px;
  cursor: pointer;
    font-family:'Arial';
    text-transform:uppercase;
}

/* style the parent container of label/input */
.parent {
  background : lightgrey; 
  display : inline-block;
  position : relative;
  width : 600px;
  background : #FFF; /* move background here */
}

/* style for reset button */
.button-reset {
  margin-top : 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="parent">
  <input type="text" class="input_text" id="input_1" />
  <label class="label" id="label_1">Name & Surname</label>
  <button id="reset" class="button-reset">Réinitialiser</button>
</div>

我想你正在尝试类似的东西。我使用 JQuery plain 因为它提供 IE 6+ 兼容性，并且我对 <input type="text" /> 和 <label></label> 使用 position : absolute; 来执行此技巧。

清除字段值后显示标签

show label after clearing field value

html

css

jquery

placeholder