pauloabmiranda
9/24/2015 - 5:49 PM

JQuery HTML5 placeholder fix

JQuery HTML5 placeholder fix

//jquery
if (!Modernizr.input.placeholder) {
    $("input").each(function() {
        var inputField = $(this);
        if (inputField.val() == '' && inputField.attr('placeholder') != '') {

            inputField.val(inputField.attr('placeholder'));

            inputField.focus(function() {
                if (inputField.val() == inputField.attr('placeholder')) {
                    inputField.val('');
                }
            });

            inputField.blur(function() {
                if (inputField.val() == '') {
                    inputField.val(inputField.attr('placeholder'));
                }
            });
        }
    });
}

//vanilla
if (!Modernizr.input.placeholder) {
  placeholders = document.querySelectorAll('input');
  
  Array.prototype.forEach.call(placeholders, function(el) {
  
      if (el.value === '' && el.getAttribute('placeholder') !== '') {
  
          el.value = el.getAttribute('placeholder');
  
          el.addEventListener('focus', function() {
              if (el.value === el.getAttribute('placeholder')) {
                  el.value = '';
              }
          });
  
          el.addEventListener('blur', function() {
              if (el.value === '') {
                  el.value = el.getAttribute('placeholder');
              }
          });
      }
  });
}