Thursday 15 December 2016

float Label for InputText in ADF

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.




The below image is how the form look and feel after applying  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.


No comments:

Post a Comment