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.