Creating a Financial Calculator Input Field: Right-to-Left Number Entry in Bubble with JavaScript

Tips
1

Enhancing Numeric Input Experience in Bubble

The standard Bubble input fields for decimal numbers and currency can create a poor user experience if your application focuses on decimal number entry. By default, the first numbers typed into the input fill the integer places, and you need to type a comma or click on the decimal places to insert decimal numbers. A client for an app I developed requested that numbers be entered from right to left, automatically placing the comma in the correct position, the currency symbol, and the thousands separators.

There are several plugins in Bubble that create this mask for inputs, but none of them reproduced the exact experience the client was looking for.

Here’s the solution I found to create inputs with customized behavior:

Implementation Steps

1. Enable ID Attributes

In Settings > General, enable the option “Expose the option to add ID attribute to HTML elements”

2. Create a TEXT Input

Create a TEXT type input and give it a unique ID attribute.

3. Create a Custom Workflow

Create a Workflow “Do When (input to be edited) is visible”, set to run “Every time”. Add a “Run JavaScript” action and insert the following code, changing ‘input-id’ to your input’s ID attribute:

const input = document.getElementById('input-id');
input.addEventListener('input', function(e) {
    // Remove non-numeric characters
    let rawValue = e.target.value.replace(/\D/g, '');
    
    // Convert to number and format with 2 decimal places
    let numericValue = (parseInt(rawValue, 10) / 100).toFixed(2);
    
    // Split integer and decimal parts
    let parts = numericValue.split('.');
    let integerPart = parts[0];
    let decimalPart = parts[1];
    
    // Add thousands separators to the integer part
    integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    
    // Join everything and update the input value
    e.target.value = 'R$' + integerPart + ',' + decimalPart;
});

In this specific case, I used the BRL formatting, using R$ as the currency symbol.

4. Enable Numeric Keyboard on Mobile

To ensure that a numeric keyboard appears when clicking the input on a mobile device (even though it’s a TEXT input), add the following code to the page’s HTML Header, replacing “input-ids” with the ID attributes of the inputs you want to affect:

<script>
function setNumericKeyboard() {
    const inputIds = [
        'input-id-1',
        'input-id-2',
        'input-id-3'
    ];
    
    let foundAll = true;
    
    inputIds.forEach(id => {
        const input = document.getElementById(id);
        if (input) {
            input.setAttribute('inputmode', 'numeric');
            input.setAttribute('pattern', '[0-9]*');
        } else {
            foundAll = false;
        }
    });
    
    // If any input hasn't been found yet, try again
    if (!foundAll) {
        setTimeout(setNumericKeyboard, 500);
    }
}

setNumericKeyboard();
</script>

This solution creates a user-friendly, calculator-style input experience that processes numbers from right to left while automatically formatting them with the proper currency symbol and thousand separators. It’s particularly useful for financial applications where users need to quickly enter monetary values.
By leveraging simple JavaScript within Bubble.io, we can overcome the limitations of standard input fields and create a more intuitive experience without relying on third-party plugins. This approach gives you complete control over the formatting and behavior of your inputs.
If you’re building financial applications, accounting tools, or any interface where users frequently enter numerical data, this implementation can significantly improve your user experience and reduce input errors.
Feel free to adapt this code to different currencies or formatting requirements by modifying the currency symbol, decimal separator, and thousands separator according to your needs.

2 Likes