done :) (only works/tested on vertical forms)
Add a class to your input field: floatingLabel
DO NOT fill in a placeholder text, but DO fill in the label of the input field. This label is the text that will float from inut to top of the input.
For our spacings and sizings this is the CSS you need to add in your project:
.floatingLabel input {
margin-top: 40px;
}
.floatingLabel label,
.floatingLabel.placeholdLabel label {
font-size: 16px !important;
position: absolute;
color: #222B53 !important;
margin-top: 8px;
margin-left: 8px;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.floatingLabel.floatThyLabel label {
font-size: 14px !important;
position: absolute;
margin-top: -22px;
margin-left: 0;
color: #222B53 !important;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
Add an HTML Snippet (Javascript with jQuery) and fill it with this code:
jQuery(document).ready(function($) {
//For each inputfield who needs a different placeholder text [the text that temp. shows up when you focus on the input field] you must make a new function
$(".floatingLabel input").focusout(function(){ //Scan the page for the targetted input fields to set the correct floating classes
var inputLength = $(this).val();
if (inputLength.length > 0) { //If something is in the input field
console.log('has something');
// here you add whatever class you want to add to other element
$(this).parent().removeClass("placeholdLabel"); //Remove the label as placeholder
$(this).parent().addClass("floatThyLabel"); //Take the label above the input field
$(this).attr('placeholder', ''); //No placeholder in this inputfield (only when focus and empty)
} else {
console.log('has nothing');
// here some other action
$(this).parent().removeClass("floatThyLabel"); //Remove the label above the input field
$(this).parent().addClass("placeholdLabel"); //Set the label as placeholder
$(this).attr('placeholder', ''); //No placeholder in this inputfield (only when focus and empty)
}
}).focusout()//trigger the focusout event manually so the correct classes will be set
// when user clicks on the input field
$(".floatingLabel.firstname input").focus(function(){ // Then when input is focussed:
$(this).parent().removeClass("placeholdLabel"); //Remove the label as placeholder
$(this).parent().addClass("floatThyLabel"); //Take the label above the input field
$(this).attr('placeholder', 'Please type in your firstname'); //Set a placeholder in this inputfield because user is focussed and input is still empty
})
.blur(function(){ // when losing the focus:
var inputLength = $(this).val();
if (inputLength.length > 0) { //if something is in the input field
console.log('has something');
// here you add whatever class you want to add to other element
$(this).parent().removeClass("placeholdLabel");//Remove the label as placeholder
$(this).parent().addClass("floatThyLabel"); //Leave the label above the input field
$(this).attr('placeholder', ''); //Remove the placeholder to be sure
} else {
console.log('has nothing'); //when nothing is in the input field
// here some other action
$(this).parent().removeClass("floatThyLabel"); //Remove the label above the input field
$(this).parent().addClass("placeholdLabel");//Set the label back as a placeholder
$(this).attr('placeholder', ''); //Remove the placeholder so no double texts are presented
}
})
// when user clicks on label instead of input field
$(".floatingLabel.firstname label").click(function(){ // Then when input is focussed:
$(this).parent().removeClass("placeholdLabel"); //Remove the label as placeholder
$(this).parent().addClass("floatThyLabel"); //Take the label above the input field
$(".floatingLabel.firstname input").focus().attr('placeholder', 'Please type in your firstname'); //Set a placeholder in this inputfield because user is focussed and input is still empty
})
.blur(function(){ // when losing the focus:
var inputLength = $(this).val();
if (inputLength.length > 0) { //if something is in the input field
console.log('has something');
// here you add whatever class you want to add to other element
$(this).parent().removeClass("placeholdLabel");//Remove the label as placeholder
$(this).parent().addClass("floatThyLabel"); //Leave the label above the input field
$(this).attr('placeholder', ''); //Remove the placeholder to be sure
} else {
console.log('has nothing'); //when nothing is in the input field
// here some other action
$(this).parent().removeClass("floatThyLabel"); //Remove the label above the input field
$(this).parent().addClass("placeholdLabel");//Set the label back as a placeholder
$(this).attr('placeholder', ''); //Remove the placeholder so no double texts are presented
}
})
//repeat
//For each inputfield who needs a different placeholder text [the text that temp. shows up when you focus on the input field] you must make a new function
$(".floatingLabel.lastname input").focus(function(){
$(this).parent().removeClass("placeholdLabel");
$(this).parent().addClass("floatThyLabel");
$(this).attr('placeholder', 'Please type in your lastname');
})
.blur(function(){
var inputLength = $(this).val();
if (inputLength.length > 0) {
console.log('has something');
// here you add whatever class you want to add to other element
$(this).parent().removeClass("placeholdLabel");
$(this).parent().addClass("floatThyLabel");
$(this).attr('placeholder', '');
} else {
console.log('has nothing');
// here some other action
$(this).parent().removeClass("floatThyLabel");
$(this).parent().addClass("placeholdLabel");
$(this).attr('placeholder', '');
}
})
// when user clicks on label instead of input field
$(".floatingLabel.lastname label").click(function(){ // Then when input is focussed:
$(this).parent().removeClass("placeholdLabel"); //Remove the label as placeholder
$(this).parent().addClass("floatThyLabel"); //Take the label above the input field
$(".floatingLabel.lastname input").focus().attr('placeholder', 'Please type in your lastname'); //Set a placeholder in this inputfield because user is focussed and input is still empty
})
.blur(function(){ // when losing the focus:
var inputLength = $(this).val();
if (inputLength.length > 0) { //if something is in the input field
console.log('has something');
// here you add whatever class you want to add to other element
$(this).parent().removeClass("placeholdLabel");//Remove the label as placeholder
$(this).parent().addClass("floatThyLabel"); //Leave the label above the input field
$(this).attr('placeholder', ''); //Remove the placeholder to be sure
} else {
console.log('has nothing'); //when nothing is in the input field
// here some other action
$(this).parent().removeClass("floatThyLabel"); //Remove the label above the input field
$(this).parent().addClass("placeholdLabel");//Set the label back as a placeholder
$(this).attr('placeholder', ''); //Remove the placeholder so no double texts are presented
}
})
});
But I bet someone can make this javascript shorter ;)
Codepen link: https://codepen.io/anon/pen/LmXEXv
edit: Already made it a bit shorter and added codepen link
edit2: Added label clicking/touching so you are not limited to only the input itself