CHunky Universe of Vigourous Astonishing SHarepoint :)

fallback for html5 placeholders

Placeholders are very handy in html5, we don’t need to fool with input values. But in SharePoint and IE we must provide fallback for placeholders if we want use them in other browsers. Here is an jQuery extension to do that:

(function ($) {
    ensurePlaceholders: function () {
      var input = document.createElement('input');
      var placeholderSupported = ('placeholder' in input);
      if (placeholderSupported) {
      function setHints(elem) {
        var $elem = $(elem);
        var value = $elem.val();
        if (value == "") {
          var placeholder = $elem.attr("placeholder");
      function removeHints(elem) {
        var $elem = $(elem);
        var value = $elem.val();
        var placeholder = $elem.attr("placeholder");
        if (value == placeholder) {
      this.find("[placeholder]").each(function() {
      this.on("focus", "[placeholder]", function(e) {
      this.on("blur", "[placeholder]", function(e) {

Then “ensure placeholders” by running this function on a wrapper element which contains fields with the placeholder attribute:


Or why not to ensure all placeholders:

jQuery(document).ready(function() {

This only runs if placeholders are not supported. This code toggles the class “empty-text”. It’s just a visual hint for not to be confused, otherwise the users can not know which is just a hint and which is the real value.

.empty-text {
  color: grey;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Daniel Chronlund Cloud Tech Blog

News, tips and thoughts for Microsoft cloud fans

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Architect, Speaker, Author

Microsoft 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Mai Omar Desouki

PFE @ Microsoft

Cameron Dwyer

Office 365, SharePoint, Azure, OnePlace Solutions & Life's Other Little Wonders


Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

DevOps, Cloud and Blockchain Consultant


SharePoint for everyone


Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint


Mostly what I know and share about...

%d bloggers like this: