Blog

Show Placeholder in Rich Text Fields

July 24, 2019
Carlyn Manly
Author
Carlyn Manly

It is now possible to display a placeholder text in a rich text field of a UI extension. A placeholder text is typically used to make it easier for users to understand what to fill out in a field when it is still empty.

The data-placeholder attribute can now be included in the HTML of a UI extension to specify the text that should be displayed in a rich text field when it is empty. For example:

<div class=ā€row verticalā€>
<label for=ā€specsā€ title=ā€Specificationsā€>Specifications</label>
<div id=ā€specsā€ class=ā€rich-textā€ data-placeholder=ā€Enter the specifications hereā€¦ā€></div>
</div>

The placeholder of a rich text field can also be set using JavaScript:

$(ā€˜#specs’).placeholder(ā€˜Enter the specifications here…’);

It is even possible to present a placeholder in the Note field. This can be done by including the following JavaScript:

ITRP.field(ā€˜note’).placeholder(ā€˜Describe your request here…’);