Placeholder Cross-Browser with jQuery

In this example below you will see how to do a Placeholder Cross-Browser with jQuery with some HTML / CSS and Javascript

A simple polyfill to make the HTML5 placeholder attribute for old Browsers

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Placeholder Cross-Browser with jQuery</title>
  
  
  
  
  
</head>

<body>

  <input type="text" placeholder="Digite seu email" />
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/placeholder-cross-browser-with-jquery-umcGj */
'use strict';

App.placeholder = function() {
  if ( ! ('placeholder' in document.createElement('input')) ) {
    var placeholderInputs = $('input[placeholder], textarea[placeholder]');

    $.map(placeholderInputs, function(element) {
      var $element = $(element);
      var placeholder = $element.attr('placeholder');

      element.value = placeholder;

      $element.on('focus', function() {
        if ( this.value === placeholder ) {
          this.value = '';
        }
      });

      $element.on('blur', function() {
        if ( this.value === '' ) {
          this.value = placeholder;
        }
      });
    });
  }
};

Comments