Creating a currency input in HTML

Current Location：Home > Learning > WEB FRONT-END > HTML >

Vue React JavaScript Angular CSS HTML

Creating a currency input in HTML

Author：JIYIK Last Updated：2025/04/19 Views：

In this article, users will learn to <input>convert a normal HTML field into a currency input field. We will use HTML and jQuery to achieve our goal.

`<input>`Convert plain to currency input in HTML using JavaScript toFixed() method

In HTML, there is a normal <input><type> element, and we can set its type as needed. We can't make a type a currency input by simply setting it to a number; we need to make more changes using JavaScript or jQuery.

For example, we can create a field in HTML <input>as shown below; It contains some attributes. The type attribute indicates the type of input it accepts.

The min and max attributes represent the minimum and maximum values it can take. The id attribute is <input>the unique ID of the element, which we can use to access the element in jQuery.

<input type="number" id="currencyInput" min="0.1" max="5000000.0" value="99.9" />

We will use jQuery to convert the above <input>field into a currency input. We create an anonymous function and store it in the inovkeCurrencyInput variable.

Below you can see how we create anonymous functions in jQuery.

$.fn.inovkeCurrencyInput = function () {
    // function code
}

Now, we will use jQuery to add a change event listener on the input element inside the function. It will help us detect changes whenever we type something in the number input.

Following is invokeCurrencyInput()the jQuery code to add the change event listener in the function.

$(this).change(function () {

});

After that, whenever the user adds or removes something from the number input, we will access the value of the number input using the valueAsNumber property. Additionally, we will attr()access the min and max properties of the input field using the method.

After accessing the min and max properties, we will parseFloat()parse the floating point value from them using JavaScript methods as shown below.

var currencyvalue = this.valueAsNumber;
var maxValue = parseFloat($(this).attr("max"));
var minValue = parseFloat($(this).attr("min"));

Now, we have the minimum and maximum values that the currency input field can accept. In addition, we store the current value of the input field in the currencyValue variable.

Using the if statement, we will check if currencyValue is between minValue and maxValue.

if (currencyvalue > maxValue){
    currencyvalue = maxValue;
}
if (currencyvalue < minValue){
    currencyvalue = minValue;
}

We will use number.toFixed(precision)the method to round currencyValue to a specific precision. In our case, the precision value is 1, so whenever the user enters an input value with a precision greater than 1, the input field automatically rounds up the numeric value and sets single precision.

Here, we show how to use number.toFixed()the method. In addition, we set the final formatted currencyValue to <input>the value of the element.

currencyvalue = currencyvalue.toFixed(1);
$(this).val(currencyvalue);

<input>Finally, we'll call the function on the <div> element wherever the document loads invokeCurrencyInput(). Here, we access <input>the <div> element using its id .

$(document).ready(function () {
   $("input#currencyInput").inovkeCurrencyInput();
});

Full source code - HTML + jQuery:

We have also added the jQuery CDN in the sample code below. Users must add it in order to call jQuery using HTML code.

<html>
  <body>
    $
    <input
      type="number"
      id="currencyInput"
      min="0.1"
      max="5000000.0"
      value="99.9"
    />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"
      integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      $.fn.inovkeCurrencyInput = function () {
        $(this).change(function () {
          var currencyvalue = this.valueAsNumber;
          var maxValue = parseFloat($(this).attr("max"));
          if (currencyvalue > maxValue) currencyvalue = maxValue;
          var minValue = parseFloat($(this).attr("min"));
          if (currencyvalue < minValue) currencyvalue = minValue;
          currencyvalue = currencyvalue.toFixed(1);
          $(this).val(currencyvalue);
        });
      };
      $(document).ready(function () {
        $("input#currencyInput").inovkeCurrencyInput();
      });
    </script>
  </body>
</html>

This code will initially display the value 99.9 in the input field. If the user enters a value outside of 0.1 and 5000000.0, it will set the values 0.1 and 5000000.0 accordingly; otherwise, our code will round the value up or down to a single digit of precision and display it in the input field.

The user needs to press Enter to submit and round the value.

This way, we can convert a normal input field into a currency input field, which has minimum and maximum values, and the user can enter a value with some precision.

Previous: None

Next: None

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >