Support for HTML 5 placeholder attribute

[Jim Coyne]

I've created a function to add support for the HTML placeholder attribute. You can use it to include some extra helpful text in input fields:

It's real simple to use - just include a call to the function in an onLoad script with the name of the field/variable and the text you want displayed:

u_addPlaceholderAttribute('short_description', 'Enter a short description of the problem');

I've tested it in Chrome, Firefox and Opera on Windows 7 and it works. Of course it does not work in current version of IE, but it does work in the upcoming IE 10.

Here's the script:

function u_addPlaceholderAttribute(variableName, hint) {
   try{
       var fieldName = g_form.getControl(variableName).name.toString();
       if (Prototype.Browser.IE) {
           fieldName.placeholder = hint;
       } else {
           $(fieldName).writeAttribute('placeholder', hint);
       }
   } catch(err) {}
}

I've also attached it as an XML export of the function - just remove the ".txt" extension and import it into your instance.

[Shiva Thomas]

Hi Jim,

Great news, I've heard that HTML Placeholder will be supported natively in Jakarta!

I've written a blog article on the subject: Great UX Trick: HTML Placeholders

[Jim Coyne]

That is indeed great news and long overdue.

Thanks for the update.

[sethhumphrey]

Shiva Thomas is correct.   I verified that Jakarta has native support for placeholder text.   In the screenshot below you'll see a new variable option field called "Example Text."   This indeed does get converted to the html5 placeholder attribute both inside the platform and service portal.   Thank you ServiceNow.

[Shiva Thomas]

Hi Set,

The drawback is that the feature in only available to ServiceCatalog Variables, not to Form fields used in the main platform.

For those we still have to implement this workaround: Great UX Trick: HTML Placeholders

We can dream that it'll be natively implemented with the Kingston release?

[rohanreddy]

Hi Jim,

I am trying to implement this in my instance and It is not working.

I have written the Script include and catalog client script. Please check below images for more information.

Please assist me in this.