API documentation

If you are looking for the complete API documentation, with all possible options and interfaces with their description, it is available here:

Complete API documentation

Minimal example

The text in bold is malleable. Try clicking on it.

Selecting input type

Use data-ma-type attribute to select the appropriate input type, or set it in the options with inputType.

data-ma-type='text'
This is the default type and doesn't need to be specified. Some malleable text.

data-ma-type='number'
Click on the number: 3

data-ma-type='email'
Email example: contact@example.org

data-ma-type='url'
Url example: https://www.deltablot.com

Select example

Select example. Here we set inputType: InputType.Select and selectOptions: [{value: '1', text: 'Blah'}] in the options.
Best country: France

Textarea example

This is a malleable paragraph that will transform into a textarea with action buttons. Settings are defined in JS options here.

Datetime example

Using data-ma-type='datetime-local'. Upcoming deadline: 2022-07-14T13:37.

Selecting behavior on blur

Use data-ma-blur attribute to select the appropriate behavior when user clicks outside the input, or set it in the options with onBlur.

data-ma-blur='cancel'
Clicking outside the input will cancel edition.

data-ma-blur='submit'
Clicking outside the input will submit changes.

data-ma-blur='ignore'
Clicking outside the input will do nothing.

Selecting behavior on Enter keypress

Use data-ma-enter attribute to select the appropriate behavior when user presses the Enter key, or set it in the options with onEnter.

data-ma-enter='cancel'
Pressing Enter will cancel edition.

data-ma-enter='submit'
Pressing Enter will submit changes.

data-ma-enter='ignore'
Pressing Enter will do nothing.

Setting behavior for both Blur action and Enter keypress

This text will submit onBlur and also onEnter.

Same with Escape keypress

The default behavior is to Cancel action, but here is an example to ignore an Escape keypress:

data-ma-escape='ignore'
Pressing Escape will do nothing.

data-ma-escape='cancel'
Pressing Escape will cancel edition (default behavior, attribute doesn't need to be added).

Adding a placeholder

data-ma-placeholder='you@example.com'
Your email is: niko@example.com

Running a function when the Cancel button is pressed

The onCancel function will run when an Action.Cancel action is triggered, like clicking the Cancel button. It must return true for the input to be reverted to the original element. See API documentation

click me and then click cancel while looking at the console output