Description
Use the Editable Text widget to place a text area on your page where the end user can insert and edit text. The widget supports default text, placeholder text for hints, and can automatically save user-entered text so that it is restored when re-opening the page.
To add it to your page, just drag it from the Objects panel to the stage and resize it as desired.
Properties
Editable Text widget supports most of the Generic Object Properties, plus the ones listed below. To edit properties of an Editable Text widget, select it and use the selection inspector at the right of your project window.
| Default Text | The initial text displayed when the widget loads |
| Placeholder | Text shown as a hint when the field is empty |
| Accessibility Label | Accessibility label for the widget, for screen readers |
| Text Box ▹ Font | Defines the font to use to display the text |
| Text Box ▹ Size | Defines the font size, in pixels, to use to display the text |
| Text Box ▹ Color | Defines the color to display the text |
| Text Box ▹ Padding | Space, in pixels, between the border of the widget and the text content |
| Text Box ▹ Line Height | Defines the line height for the text |
| Text Box ▹ Letter Spacing | Defines the letter spacing, in pixels, for the text |
| Assessment ▹ Autosave User Text | When enabled, user-entered text will be saved and later restored when re-opening the page |
| Assessment ▹ Assessment ID | Optional, allows to set an assessments identifier for this widget, enabling statistics collection by Shelf or LMS systems |
| Assessment ▹ Assessment Category | Optional, allows to set an assessments category for this widget, enabling statistics collection by Shelf or LMS systems |
Events
Editable Text widget triggers all Widget Events, plus the ones listed below. To edit event handlers for an Editable Text widget, select it and use the Interactivity Panel on the right side of the project window.
Changed
Triggered when the user modifies the text content.
Actions
Editable Text widget can be used as target of most Generic Actions.
JavaScript API
You can retrieve or set the text of an Editable Text widget from custom JavaScript code using the pubcoder.controllers interface. First, obtain the widget controller using its object ID, then call getText() or setText():
// Get the current text
var text = pubcoder.controllers.get("obj10679")?.getText();
// Set new text
pubcoder.controllers.get("obj10679")?.setText("Hello world!");
Replace obj10679 with the actual ID of your Editable Text widget, which you can find in the Layers Panel or in the selection inspector.