Floating label

floating-label.markdown

Floating label

A Pen by Josh Studley on CodePen.

License.

index.html

<div id="floatContainer1" class="float-container">
  <label for="floatField1">Float Label 1</label>
  <input type="text" id="floatField1" data-placeholder="Placeholder 1">
</div>

<div id="floatContainer2" class="float-container">
  <label for="floatField2">Float Label 2</label>
  <input type="text" id="floatField2" data-placeholder="Placeholder 2">
</div>

script.babel

const FloatLabel = (() => {
  
  // add active class and placeholder 
  const handleFocus = (e) => {
    const target = e.target;
    target.parentNode.classList.add('active');
    target.setAttribute('placeholder', target.getAttribute('data-placeholder'));
  };
  
  // remove active class and placeholder
  const handleBlur = (e) => {
    const target = e.target;
    if(!target.value) {
      target.parentNode.classList.remove('active');
    }
    target.removeAttribute('placeholder');    
  };  
  
  // register events
  const bindEvents = (element) => {
    const floatField = element.querySelector('input');
    floatField.addEventListener('focus', handleFocus);
    floatField.addEventListener('blur', handleBlur);    
  };
  
  // get DOM elements
  const init = () => {
    const floatContainers = document.querySelectorAll('.float-container');
    
    floatContainers.forEach((element) => {
      if (element.querySelector('input').value) {
          element.classList.add('active');
      }      
      
      bindEvents(element);
    });
  };
  
  return {
    init: init
  };
})();

FloatLabel.init();

style.scss

* {
  font-family: arial;
}

/** float container */
.float-container {
  border: solid 1px #ccc;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 0 8px;
  position: relative;
  width: 300px;
  
  input {
    border: none;
    font-size: 16px;
    outline: 0;
    padding: 16px 0 10px;    
    width: 100%;
  }

  label {
    font-size: 16px;
    position: absolute;
    transform-origin: top left;
    transform: translate(0, 16px) scale(1); 
    transition: all .1s ease-in-out;  //speed
  }
  
  /** active label */
  &.active {
    label {
      //move the x coordinate and reduce size
      transform: translate(0, 4px) scale(.75);
    }
  }
}