Bootstrap input currency format example

June 28, 2022

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To show the input currency number formatted, Just use the formatCurrency() method in your input type. It will format your currency amount and show the input in real-time.

In the formatCurrency() method, I handling

Custom Currency icon option
Auto Currency structure format
Put 2 float values at the end
remove alphabets from text

Here is the formatCurrency() javascript function code example.

function formatNumber(n) {
    // format number 1000000 to 1,234,567
    return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function formatCurrency(input, currency, blur) {
    // appends $ to value, validates decimal side
    // and puts cursor back in right position.
    // get input value
    var input_val = input.value;
    // don't validate empty input
    if (input_val === "") {
        return;
    }

    // original length
    var original_len = input_val.length;

    // initial caret position
    var caret_pos = input.selectionStart;

    // check for decimal
    if (input_val.indexOf(".") >= 0) {
        // get position of first decimal
        // this prevents multiple decimals from
        // being entered
        var decimal_pos = input_val.indexOf(".");

        // split number by decimal point
        var left_side = input_val.substring(0, decimal_pos);
        var right_side = input_val.substring(decimal_pos);

        // add commas to left side of number
        left_side = formatNumber(left_side);

        // validate right side
        right_side = formatNumber(right_side);

        // On blur make sure 2 numbers after decimal
        if (blur === "blur") {
        right_side += "00";
        }

        // Limit decimal to only 2 digits
        right_side = right_side.substring(0, 2);

        // join number by .
        input_val = currency + left_side + "." + right_side;
    } else {
        // no decimal entered
        // add commas to number
        // remove all non-digits
        input_val = formatNumber(input_val);
        input_val = currency + input_val;

        // final formatting
        if (blur === "blur") {
        input_val += ".00";
        }
    }

    // send updated string to input
    input.value = input_val;

    // put caret back in the right position
    var updated_len = input_val.length;
    caret_pos = updated_len - original_len + caret_pos;
    input.setSelectionRange(caret_pos, caret_pos);
}

Let’s start today’s article input type currency bootstrap example

Here, I will provide two examples using the above formatCurrency() method and for the input field, I will use bootstrap.

Format input number to USD ( dollar ) currency
Format input number to INR ( rupees ) currency

Input type money example.

In this example, we will create two input type numbers, and in onkeyup, and onBlur I will call the formatCurrency() method to format a number in currency format.

Here, I will use HTML, Bootstrap, and javascript to create a currency input field.

Let’s start the coding.

input-currency-in-bootstrap.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>format currency example</title>

    <script>
      function formatNumber(n) {
        // format number 1000000 to 1,234,567
        return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }

      function formatCurrency(input, currency, blur) {
        // appends $ to value, validates decimal side
        // and puts cursor back in right position.
        // get input value
        var input_val = input.value;
        // don't validate empty input
        if (input_val === "") {
          return;
        }

        // original length
        var original_len = input_val.length;

        // initial caret position
        var caret_pos = input.selectionStart;

        // check for decimal
        if (input_val.indexOf(".") >= 0) {
          // get position of first decimal
          // this prevents multiple decimals from
          // being entered
          var decimal_pos = input_val.indexOf(".");

          // split number by decimal point
          var left_side = input_val.substring(0, decimal_pos);
          var right_side = input_val.substring(decimal_pos);

          // add commas to left side of number
          left_side = formatNumber(left_side);

          // validate right side
          right_side = formatNumber(right_side);

          // On blur make sure 2 numbers after decimal
          if (blur === "blur") {
            right_side += "00";
          }

          // Limit decimal to only 2 digits
          right_side = right_side.substring(0, 2);

          // join number by .
          input_val = currency + left_side + "." + right_side;
        } else {
          // no decimal entered
          // add commas to number
          // remove all non-digits
          input_val = formatNumber(input_val);
          input_val = currency + input_val;

          // final formatting
          if (blur === "blur") {
            input_val += ".00";
          }
        }

        // send updated string to input
        input.value = input_val;

        // put caret back in the right position
        var updated_len = input_val.length;
        caret_pos = updated_len - original_len + caret_pos;
        input.setSelectionRange(caret_pos, caret_pos);
      }
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td>USD currency example</td>
        <td>&nbsp;</td>
        <td class="input-group">
          <input
            type="text"
            id="txtExampleBoxOne"
            value=""
            class="form-control"
            onBlur="formatCurrency(this, '$ ', 'blur');"
            onkeyup="formatCurrency(this, '$ ');"
            placeholder="$ #,###.00"
          />
        </td>
      </tr>
      <tr>
        <td>INR currency example</td>
        <td>&nbsp;</td>
        <td class="input-group">
          <input
            type="text"
            id="txtExampleBoxOne"
            value=""
            class="form-control"
            onBlur="formatCurrency(this, '₹ ', 'blur');"
            onkeyup="formatCurrency(this, '₹ ');"
            placeholder="₹ #,###.00"
          />
        </td>
      </tr>
    </table>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Here, is the output of auto input number formatting in currency style see the below output or try it yourself.

Here, we are provided code sandbox links for the above program for the HTML currency input example. Then you can use it whenever you want and do the changes as per your requirements.

Try it Yourself

Happy Coding,

I hope the above example with help you to do your task.

Bootstrap input currency format example

Input type money example.

Premium Content

Books

Interview Questions

Portfolio Template

Cheat Sheets

Related Posts