jQuery addClass example

Change class name on click in jQuery

by mits87

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group form-group--float-label">
  <input type="email" name="email" value="" placeholder="E-mail" autocomplete="off" data-float-placeholder="true">
  <label class="float-label float-label--active" for="email">E-mail</label>
</div>

CSS

body {
  padding: 20px
}

.float-label{
	color:#9b9b9b;
	font-size:11px;
	position:absolute;
	z-index:4;
	left:10px;
	top:20px;
	padding:0 3px;
	opacity:0;
	visibility:hidden;
	display:inline-block;
	transition:color .15s ease-in-out,opacity .15s ease-in-out,visibility .15s ease-in-out,-webkit-transform .15s ease-in-out;
	transition:color .15s ease-in-out,opacity .15s ease-in-out,visibility .15s ease-in-out,transform .15s ease-in-out;
	transition:color .15s ease-in-out,opacity .15s ease-in-out,visibility .15s ease-in-out,transform .15s ease-in-out,-webkit-transform .15s ease-in-out
}
.float-label::before{
	content:'';
	display:block;
	width:100%;
	height:2px;
	top:8px;
	left:0;
	position:absolute;
	background:#ffffff;
	z-index:-1
}
.float-label--active{
	color:#4AABE4
}
.form-group--float-label .float-label{
	opacity:1;
	visibility:visible;
	-webkit-transform:translateY(-14px);
	transform:translateY(-14px)
}

JavaScript

(function($) {

  'use strict';

  $.fn.floatPlaceholder = function(options) {
    var settings = $.extend({
      labelElement: '.float-label',
      labelActiveClass: 'float-label--active',
      wrapperElement: '.form-group',
      wrapperActiveClass: 'form-group--float-label',
    }, options);

    return this.each(function(index, element) {
      var $input = $(element),
        $label = $input.siblings(settings.labelElement),
        $wrapper = $input.closest(settings.wrapperElement);

      $input.off('focus.fp keyup.fp2').on('focus.fp keyup.fp2', function() {
        $label.addClass(settings.labelActiveClass);
      }).off('blur.fp').on('blur.fp', function() {
        $label.removeClass(settings.labelActiveClass);
      });

      $input.off('keyup.fp change.fp').on('keyup.fp change.fp', function() {
        if ($input.val() === '') {
          $wrapper.removeClass(settings.wrapperActiveClass);
        } else {
          $wrapper.addClass(settings.wrapperActiveClass);
        }
      }).trigger('keyup.fp');
    });
  };

}(jQuery));


$('[name="email"]').floatPlaceholder();