JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatted Number Input</title>
    <style>
   .numberDiv {
    padding: 10px;
    border: 1px solid #ccc;
    width: 200px;
    cursor: pointer;
    text-align: left;
}

.numberInput {
    padding: 10px;
    border: 1px solid #ccc;
    width: 200px;
    display:none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var numberInputs = document.querySelectorAll(".numberInput");

    numberInputs.forEach(function(numberInput) {
        // Create the div element
        var numberDiv = document.createElement("div");
        numberDiv.className = "numberDiv";
        numberDiv.onclick = function() { editNumber(numberDiv); };

        // Get the initial value from the input field
        var presetNumber = parseFloat(numberInput.value);

        // Display the formatted number in the div
        if (!isNaN(presetNumber)) {
            numberDiv.innerText = presetNumber.toLocaleString();
        } else {
            numberDiv.innerText = numberInput.value; // Use the raw value from the input field if it's not a number
        }

        // Insert the div before the input
        numberInput.parentNode.insertBefore(numberDiv, numberInput);
    });
});

function editNumber(div) {
    var numberDiv = div;
    var numberInput = numberDiv.nextElementSibling;

    numberDiv.style.display = "none";
    numberInput.style.display = "inline-block";
    numberInput.value = numberDiv.innerText.replace(/,/g, ''); // Remove commas for editing
    numberInput.focus();
}

function formatNumber(input) {
    var numberInput = input;
    var numberDiv = numberInput.previousElementSibling;

    var numberValue = parseFloat(numberInput.value);
    if (!isNaN(numberValue)) {
        numberDiv.innerText = numberValue.toLocaleString(); // Format number with commas
    } else {
        numberDiv.innerText = numberInput.value;...