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

一切正常，只有一件事 - 当你写东西然后点击清楚，没关系，但在此之后当你尝试写一些标签停留并且值和标签都显示时，我想摆脱这个问题0.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

好吧，我刚刚提升你的小提琴，似乎工作

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+兼容性，我使用position : absolute;来<input type="text" />和<label></label>来执行此操作。

清除字段值后显示标签

5 个答案: