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.

[ericgilmore]

So, is there an alternative way to implement a placeholder like solution for the Service Portal? Currently I'm using g_form.setValue( fieldname,hint ) in the onLoad client script. (No access to the SystemUI)

And have been wrestling with how to implement onClick and onCondition to get it to 1) clear the field when someone clicks on it, and 2) fill the field with the hint if they don't add their own text, and 3) not send the default hint on submit.

If someone has already done this, I'd gladly practice good code re-use and give them a cookie!

Running Helsinki BTW.

[laszlobolya]

Hi Jim, many thanks for this article. I wonder if you figured out anything to have the same functionality for Service Portal? Many thanks!

[will_smith]

Too much Super Bowl fun, huh jim.coyne???

[Jim Coyne]

I wish it was that

[Jerome11]

Hi Jim, works fine for text and multi-line text variables. Any thoughts on how to get placeholder text into an HTML variable?