Editable
Click/Enter/Space enters edit mode; Enter submits, Esc cancels, and empty-value submission is non-destructive by default.
Basic Usage
Click to edit
Click the text (or press Enter/Space when focused) to enter edit mode; Enter submits, Esc reverts.
Placeholder
Empty value placeholder
placeholder is shown when the value is empty.
submit-on-enter=false
Enter does not submit
With submit-on-enter=false, Enter does not submit; use the confirm button inside edit mode instead.
maxlength
Length limit
Disabled
disabled
Events
Submit/cancel events
Listen to oas-change (submit) and oas-cancel (cancel/empty-value submit):
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
disabled | Disabled | boolean | — |
maxlength | Maximum input length | string | — |
placeholder | Empty value placeholder | string | — |
submit-on-enter | Whether Enter submits | string | true |
value | Current value (controlled) | string | — |
Events
| Event | Description |
|---|---|
oas-cancel | Cancel/empty-value submit (reverts to old value), non-destructive by default, detail: { value: oldValue } |
oas-change | New value submitted, detail: { value } |
Keyboard: in display mode Enter/Space/click enters edit mode; in edit mode Enter submits, Esc reverts and blurs.
ARIA: display mode has role="button" + aria-label="编辑"; the edit-mode input keeps the same label.