Inline Editable

Examples

Name: John Smith. Click to edit.

HTML

Name: <span id="editable">John Smith</span>. Click to edit.

JavaScript

editable = new hx.InlineEditable('#editable')

Api

Change Log

Prototypes

hx.InlineEditableextendsEventEmitter

Constructors

hx.InlineEditableselectorString / HTMLElementoptionsObject

Arguments

selectorString / HTMLElement

A CSS selector that uniquely identifies the element, or an HTMLElement.

options

Properties

enterValueTextString

The text to display when no value has been entered to prompt the user to enter something

Default: hx.userFacingText('inlineEditable', 'enterValue')

valueString

The initial value of the inline editable. The default is the text in the selection at the point of creation.

Default: selection.text()

Events

change

Emitted when the value is changed.

Properties

causeString

Can be 'user' or 'api', depending on what caused the change. 'api' means a call to the javascript api caused the change, 'user' means that the change was caused by inputting

valueString

The new value.

Methods

valuevalueStringString / InlineEditable

Sets the text of the element.

Arguments

valueString

The text to give the element. If not specified the current value will be returned.

Returns

String / InlineEditable

Returns the current value in the editable if a value is not speficied. If a value is specified, this InlineEditable is returned for chaining.

Functions

hx.inlineEditableoptionsObjectSelection

Creates a new InlineEditable set up on a detached element, wrapped in a selection

Arguments

options

See the options object for constructing InlineEditable

Returns

Selection

A selection containing an element with an InlineEditable initialised on it