jQuery Change Input Placeholder Text

If you are stuck with a form input field placeholder text that cannot be updated (eg a search field), then you can add this simple jQuery snippet to tailor it to your needs:-

<script>
  jQuery(document).ready(function($){ 
  $('.form-class').find("input[type=text]").each(function(ev)
  {
      if(!$(this).val()) { 
     $(this).attr("placeholder", "Your new text");
  }
  });
});
  </script>

Coincidentally if you want to style your input placeholder then you can use the ::placeholder pseudo element / 

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: blue;
}
::-moz-placeholder { /* Firefox 19+ */
  color: blue;
}
:-ms-input-placeholder { /* IE 10+ */
  color: blue;
}
:-moz-placeholder { /* Firefox 18- */
  color: blue;
}
About the Author
jQuery Change Input Placeholder Text jQuery Change Input Placeholder Text 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.