fauxparse/bootstrap-floating-labels

A new placeholder UI design for Bootstrap forms

bootstrap-floating-labels's Issues

No label for input type="number" with text value

In case of

  <input type="number" value="Incorrect">

!!$(e.target).val() is false and no top label shown

Non-jQuery version

I don't use bootstrap's Javascript functionality, thus I also don't use jQuery in my projects. I wanted to use this but it would require me to convert it out of jQuery syntax and into Vanilla JS. I weighed the options and figured it was worth it.

Here is a first pass at it and this works:

var floatingFormGroups = Array.from(document.querySelectorAll('.floating-label-form-group'));

floatingFormGroups.forEach(function(floatingFormGroup) { 

  floatingFormGroup.addEventListener('input', function(e) {
    if (e.target.value && !this.classList.contains('floating-label-form-group-with-value')) {
      this.classList.add('floating-label-form-group-with-value');
    } else if (!e.target.value && this.classList.contains('floating-label-form-group-with-value')) {
      this.classList.remove('floating-label-form-group-with-value');
    }
  });

  floatingFormGroup.addEventListener('focusin', function() {
    this.classList.add('floating-label-form-group-with-focus');
  });

  floatingFormGroup.addEventListener('focusout', function() {
    this.classList.remove('floating-label-form-group-with-focus');
  });
});

I thought I'd add it here in case anyone else has this issue. Alternatively it would be great if you'd like to add it into the example @fauxparse to get rid of the jQuery dependency.