Optional
cancelThe text displayed on Cancel button.
Abort
Optional
cancelThe classes added to Cancel button.
['btn', 'btn-secondary']
Optional
debugEnabling debug mode will produce verbose output in the console.
false
Optional
eventThis is where you define the type of event that will trigger malle.
EventType.Click
Optional
focusShould the newly created input grab focus?
true
Optional
formThe classes added to the form element.
['d-inline-flex']
Optional
inputThe classes added to the input element.
['form-control']
Optional
inputDefine the type of the input element.
InputType.Text
Optional
inputAllow setting a different value than the current element content.
Optional
listenStart listening immediatly or not.
false
Optional
listenHTML selector to target malleable elements on the page.
Optional
onWhat Action should be taken when focus of the input is lost.
Optional
onWhat Action should be taken when the Enter key is pressed?
Action.Submit
Optional
onWhat Action should be taken when the Escape key is pressed?
Action.Cancel
Optional
placeholderA text that is shown on empty input.
Optional
requireDo nothing if new value is the same as the old value.
true
Optional
returnedUse innerHTML instead of innerText (only use if the return value is trusted HTML).
false
Optional
selectAn array of options for InputType.Select. Can also be a Promise and fetched asynchronously.
selectOptions: [
{ value: '1', text: 'Rivoli' },
{ value: '2', text: 'Austerlitz' },
{ value: '3', text: 'Marengo', selected: true },
],
// Change the keys used to lookup value and text
selectOptionsValueKey: 'id',
selectOptionsTextKey: 'title',
// this promises to return an Array with objects that have the keys "id" and "title"
selectOptions: Something.getOptions(),
Optional
selectWhat is the name of the key to use to lookup the option text in the selectOptions array?
text
Optional
selectWhat is the name of the key to use to lookup the values in the selectOptions array?
value
Optional
submitThe text on the Submit button.
Save changes
Optional
submitThe classes added to the submit button.
submitClasses: ['btn', 'btn-primary', 'mt-2'],
Optional
tooltipThe text added on hover of the malleable element. Uses the title
attribute.
Optional
afterOptional
beforeThis is the main and only mandatory option parameter. It is the user function that is called when the Submit action happens.
// this is the user function that will process the new value
// typically this will POST to some endpoint and get some json back
// it receives the event
const myCustomFunction = (value, orig) => {
console.log(`New text: ${value}`);
// do something with that value, like POSTing it somewhere
return new Promise(resolve => resolve(value));
};
new Malle({
fun: myCustomFunction,
}).listen();
Optional
onA function that runs when a Cancel action is performed. Must return true
or the input is not reverted to the original element.
onCancel: (original, event, input) => {
console.log('a cancel action has been detected');
return true;
},
Optional
onThis function runs right after the form is created. Its return value has no impact.
onEdit: (original, event, input) => {
console.log('this will run after the input is present on the page');
return true;
},
Configuration object for the Malle class.