FloatLabel for input components are the common requirement to get good user friendly experience.
To achieve this we need to write jQuery/Javascript. Basically, The concept is just remove the placeholder attribute from input component, Dynamically append the span component then assign placeholder value and place it on input component. Whenever user entered something on it then will move to the top using CSS3 transitions.
The below image is how the form look and feel without applying any placeholder customisation.
Everything has customised with jQuery and CSS3. The below are the implementation code.
JQuery:
function floatLabel(){
var ua = window.navigator.userAgent
var msie = ua.indexOf("MSIE ")
ieversion = parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
if ((msie > 0) && (10 > ieversion)) {
} else {
$('input[type=text],input[type=date],input[type=password],input[type=tel]').each(function(index, value) {
//$('.userloginInputText input').each(function(index,value){
var noPlaceHolder = $(value).parent().parent().hasClass('noPlaceHolderNeed');
if (noPlaceHolder) {
} else {
var getPlaceholder = $(this).attr('placeholder');
if (getPlaceholder != "") {
var checkParent = $(this).parent().hasClass('placeholder-con');
if (checkParent) {} else {
$(this).wrap("<div class='placeholder-con'>");
}
var getParent = $(this).parent();
spanCheck = $('.getParent').find('placeholder-text').val();
var checkSpan = $(this).parent().find('.placeholder-text').length;
if (checkSpan >= 1) {
var checkValue = $(this).val();
if (checkValue != "") {
$(this).parent().find('span').addClass('inputFocused');
}
} else {
$("<span class='placeholder-text'>").prependTo(getParent).html(getPlaceholder);
var checkValue = $(this).val();
if (checkValue != "") {
$(this).parent().find('span').addClass('inputFocused');
}
}
$(this).removeAttr('placeholder');
var getDisabledAttr = $(this).attr('disabled');
if (typeof getDisabledAttr !== typeof undefined && getDisabledAttr !== false) {} else {
$(this).click(function() {
$(this).trigger('focus');
});
$(this).focus(function() {
$(this).addClass('addBorder');
$(this).parent().find('span').addClass('inputFocused');
$(this).removeClass('addIeBorder');
});
$(this).parent().find('span').click(function() {
$(this).next().find('input').addClass('addBorder');
$(this).parent().find('span').addClass('inputFocused');
$(this).next().trigger('focus');
});
$(this).blur(function(event) {
var checkValue = $(this).val();
if (checkValue == "") {
$(this).parent().find('span').attr("class", "placeholder-text");
$(this).addClass('addIeBorder');
} else {
$(this).addClass('addIeBorder');
}
});
}
}
}
});
}
}
CSS:
.placeholder-con{
position: relative;
}
.placeholder-text{
position: absolute;
top:22px;
left: 5px;
color: #888;
font-size:14px;
transition: all cubic-bezier(0.25,.8,.25,1) .25s;
}
.inputFocused{
color: #00B9F5;
font-size: 12px;
top: 0px;
}
.addBorder{
border-bottom:2px solid #00B9F5 !important;
}
.addIeBorder{
border-bottom:2px solid #b7b7b9 !important;
}
I am attaching the sample application for reference. Download below link for understanding the implementation.
Download
Let me know if you have any doubts.
To achieve this we need to write jQuery/Javascript. Basically, The concept is just remove the placeholder attribute from input component, Dynamically append the span component then assign placeholder value and place it on input component. Whenever user entered something on it then will move to the top using CSS3 transitions.
The below image is how the form look and feel without applying any placeholder customisation.
The below image is how the form look and feel after applying placeholder customisation.
JQuery:
function floatLabel(){
var ua = window.navigator.userAgent
var msie = ua.indexOf("MSIE ")
ieversion = parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
if ((msie > 0) && (10 > ieversion)) {
} else {
$('input[type=text],input[type=date],input[type=password],input[type=tel]').each(function(index, value) {
//$('.userloginInputText input').each(function(index,value){
var noPlaceHolder = $(value).parent().parent().hasClass('noPlaceHolderNeed');
if (noPlaceHolder) {
} else {
var getPlaceholder = $(this).attr('placeholder');
if (getPlaceholder != "") {
var checkParent = $(this).parent().hasClass('placeholder-con');
if (checkParent) {} else {
$(this).wrap("<div class='placeholder-con'>");
}
var getParent = $(this).parent();
spanCheck = $('.getParent').find('placeholder-text').val();
var checkSpan = $(this).parent().find('.placeholder-text').length;
if (checkSpan >= 1) {
var checkValue = $(this).val();
if (checkValue != "") {
$(this).parent().find('span').addClass('inputFocused');
}
} else {
$("<span class='placeholder-text'>").prependTo(getParent).html(getPlaceholder);
var checkValue = $(this).val();
if (checkValue != "") {
$(this).parent().find('span').addClass('inputFocused');
}
}
$(this).removeAttr('placeholder');
var getDisabledAttr = $(this).attr('disabled');
if (typeof getDisabledAttr !== typeof undefined && getDisabledAttr !== false) {} else {
$(this).click(function() {
$(this).trigger('focus');
});
$(this).focus(function() {
$(this).addClass('addBorder');
$(this).parent().find('span').addClass('inputFocused');
$(this).removeClass('addIeBorder');
});
$(this).parent().find('span').click(function() {
$(this).next().find('input').addClass('addBorder');
$(this).parent().find('span').addClass('inputFocused');
$(this).next().trigger('focus');
});
$(this).blur(function(event) {
var checkValue = $(this).val();
if (checkValue == "") {
$(this).parent().find('span').attr("class", "placeholder-text");
$(this).addClass('addIeBorder');
} else {
$(this).addClass('addIeBorder');
}
});
}
}
}
});
}
}
CSS:
.placeholder-con{
position: relative;
}
.placeholder-text{
position: absolute;
top:22px;
left: 5px;
color: #888;
font-size:14px;
transition: all cubic-bezier(0.25,.8,.25,1) .25s;
}
.inputFocused{
color: #00B9F5;
font-size: 12px;
top: 0px;
}
.addBorder{
border-bottom:2px solid #00B9F5 !important;
}
.addIeBorder{
border-bottom:2px solid #b7b7b9 !important;
}
I am attaching the sample application for reference. Download below link for understanding the implementation.
Download
Let me know if you have any doubts.