Blog

Show Placeholder in Rich Text Fields

July 24, 2019
Carlyn Manly
1 Min Read

Table of contents

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โ€ฆโ€™);