form-floating-label.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. // floating label
  2. (function ($) {
  3. 'use strict';
  4. $.fn.floatingLabel = function (option) {
  5. var parent = this.closest('.form-group-label');
  6. if (parent.length) {
  7. switch (option) {
  8. case 'focusin':
  9. parent.addClass('control-focus');
  10. break;
  11. case 'focusout':
  12. parent.removeClass('control-focus');
  13. break;
  14. default:
  15. if (this.val()) {
  16. parent.addClass('control-highlight');
  17. } else if (this.is('select') && $('option:first-child', this).html().replace(' ', '') !== '') {
  18. parent.addClass('control-highlight');
  19. } else {
  20. parent.removeClass('control-highlight');
  21. };
  22. };
  23. };
  24. return this;
  25. };
  26. }(jQuery));
  27. $(function () {
  28. 'use strict';
  29. $('.form-group-label .form-control').each(function () {
  30. $(this).floatingLabel('change');
  31. });
  32. $(document).on('change', '.form-group-label .form-control', function () {
  33. $(this).floatingLabel('change');
  34. });
  35. $(document).on('focusin', '.form-group-label .form-control', function () {
  36. $(this).floatingLabel('focusin');
  37. });
  38. $(document).on('focusout', '.form-group-label .form-control', function () {
  39. $(this).floatingLabel('focusout');
  40. });
  41. });