Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Backspace number by number

Issue

I am trying to implement a backspace feature using an ← arrow button on my app. However, my current code doesn't work. I need to store the input value and read it using a specific syntax.

Resolution

To enable backspacing by clicking the ← arrow button in an input field, you need to store the input value using the storeValue() function and update it using the slice() method. For example, you can store the input value for a number field as follows:

{{ storeValue('num', Input1.text.slice(0,-1)) }}

This stores the input value for the Input1 field in a store variable named num, after removing the last character from the input using the slice() method.

To display this value in the input field, you can use the store object as follows:

{{ appsmith.store.num }}

This reads the value stored in the num variable in the store object and displays it in the input field.

By combining these two snippets, you can create a backspace function that updates the input value and displays it in the input field:

backspace: async () => {
storeValue('num', Input1.text.slice(0,-1));
updateInput(Input1, appsmith.store.num);
}

This first updates the value stored in num with the new input value using storeValue(), and then updates the input field to display the new value using the updateInput() function.