Gestion d'un label flottant

by oilvier

HTML

<p>
  <span class="forms-placeholder">
    <label class="forms-placeholder__label">Votre e-mail</label>
    <input type="text" placeholder="Abonnez vous aux nouvelles de l’Audab">
  </span> 
</p>

SCSS

body {padding:20px;}

.forms-placeholder {position:relative;
   .forms-placeholder__label {position:absolute; font-size:75%; left:0; bottom:50%; padding:0 5px; color:gray; opacity:0; visibility:hidden; transition:all 0.3s;
	   &.is-input-filled {bottom:70%; opacity:1; background:white; visibility:visible;}
	   &.is-input-on {color:red;}
	}
}

JavaScript

var onClass = "is-input-on";
var showClass = "is-input-filled";

$("input[placeholder]").bind("checkval",function(){
  var label = $(this).prev("label");

  if(this.value !== ""){
    label.addClass(showClass);
  } else {
    label.removeClass(showClass);
  }
}).on("keyup change",function(){
  $(this).trigger("checkval");
}).on("focus",function(){
  $(this).prev("label").addClass(onClass);
}).on("blur",function(){
  $(this).prev("label").removeClass(onClass);
}).trigger("checkval");