Set value to currency in <input type="number" />

Question

I am trying to format a number input by the user into currency using javascript. This works fine on <input type="text" />. However, on <input type="number" /> I cannot seem to be able to set the value to anything that contains non-numeric values. The following fiddle shows my problem

http://jsfiddle.net/2wEe6/72/

Is there anyway for me to set the value to something like $125.00?

I want to use <input type="number" /> so mobile devices know to bring up a keyboard for number input.

Answer 1

I was strugling witht he same issue for a good thirty minutes, but i eventually decided i was happy with this. (very similir to yassirs way, except without jquery i think)

• No Jquery or anythign just Vanilla JS

• can click anywhere in the box to interact

• formats on input.

• Formats numerical characters in a text input into a currency format

• adds the $ symbol

• adds a comma every 3 digits

• adds a decimal for 2 fractions also changes the color of the text value

// Get the input element with the id "inputamount"
const inputAmount = document.getElementById("inputamount");

// Add an event listener to listen for input changes in the input element
inputAmount.addEventListener("input", function () {
    // Call the formatCurrency function when the input value changes, passing the input element and its color element
    formatCurrency(this, inputAmount);
});

// The formatCurrency function takes an input element and an inputColor element
function formatCurrency(input, inputColor) {
    // Remove non-numeric characters from the input value
    let value = input.value.replace(/[^\d]+/g, '');

    // Split the value into whole and decimal parts
    const wholePart = value.slice(0, -2);
    const decimalPart = value.slice(-2);

    // Format the whole part with commas every three digits
    let formattedValue = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    // Add the decimal point and the last two digits
    formattedValue += `.${decimalPart}`; 
    // Update the input value with the formatted value and add $ symbol
    input.value = "$"+formattedValue;

    // Change the color style of the input based on its value
    if (input.value === "") {
        // When the input is empty, set the text color to placeholder color
        inputColor.style.color = "#757575";
    } else {
        // When the input has text, set the text color to whatever you want
        inputColor.style.color = "#14990d";
        // when input has value it is set to bold weight here
        inputColor.style.fontWeight = "bold";
    }
}

.background{background-color: #fff;}

.container {width: 130px;background-color: #1b2327;color: #fff;border: 6px outset #606263;border-radius: 10px;padding: 4px;text-align: center;}

#inputamount {width: 75%;text-align: center;background-color: #283339;color: #606263;border: 2px outset #606263;margin: auto;}

span.subtext {font-size: 11px;font-style: italic;color: #606263;}

<div class="background">
  <div class="container">
    <div class= "Amountbox" id="Expense-Amountbox">
        <label for="expense">Enter Amount</label>
        <input type="text" id="inputamount" placeholder="10,000.00" style="display: block;">
        <span class="subtext">Automatically Formatted</span>
        <br>
        <span class="subtext">1234567 = $12,345.67</span>
    </div>
  </div>
</div>

Answer 2

I did using this . This code snippet automatically format numbers into currency and prefix a dollar sign.

<div class="main">
  <h1>Auto Formatting Currency</h1>
  
  <form method="post" action="#">
  <label for="currency-field">Enter Amount</label>
  <input type="text" name="currency-field" id="currency-field" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="" data-type="currency" placeholder="$1,000,000.00">
  <button type="submit">Submit</button>
</form>

<p>Auto format currency input field with commas and decimals if needed. Text is automatically formated with commas and cursor is placed back where user left off after formatting vs cursor moving to the end of the input. Validation is on KeyUp and a final validation is done on blur.</p>

<p>To use just add the following to an input field:</p>
  
 <pre>data-type="currency"</pre>
  
</div><!-- /main -->

    html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


body {
  background: #f5f5f5;
  color: #333;
  font-family: arial, helvetica, sans-serif;
  font-size: 32px;
}

h1 {
  font-size: 32px;
  text-align: center;
}

p {
  font-size: 20px;
  line-height: 1.5;
  margin: 40px auto 0;
  max-width: 640px;
}

pre {
  background: #eee;
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 20px;
}

form {
  margin: 40px auto 0;
}

label {
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

input {
  border: 2px solid #333;
  border-radius: 5px;
  color: #333;
  font-size: 32px;
  margin: 0 0 20px;
  padding: .5rem 1rem;
  width: 100%;

}

button {
  background: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  padding: 1rem;
}

button:hover {
  background: #333;
  border: 2px solid #333;
  color: #fff;
}

.main {
  background: #fff;
  border: 5px solid #ccc;
  border-radius: 10px;
  margin: 40px auto;
  padding: 40px;
  width: 80%;
  max-width: 700px;
}

    // Jquery Dependency

$("input[data-type='currency']").on({
    keyup: function() {
      formatCurrency($(this));
    },
    blur: function() { 
      formatCurrency($(this), "blur");
    }
});


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


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

  // initial caret position 
  var caret_pos = input.prop("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 = "$" + left_side + "." + right_side;

  } else {
    // no decimal entered
    // add commas to number
    // remove all non-digits
    input_val = formatNumber(input_val);
    input_val = "$" + input_val;
    
    // final formatting
    if (blur === "blur") {
      input_val += ".00";
    }
  }
  
  // send updated string to input
  input.val(input_val);

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

https://codepen.io/akalkhair/pen/dyPaozZ

Answer 3

In the end I made a jQuery plugin that will format the <input type="number" /> appropriately for me. I also noticed on some mobile devices the min and max attributes don't actually prevent you from entering lower or higher numbers than specified, so the plugin will account for that too. Below is the code and an example:

(function($) {
  $.fn.currencyInput = function() {
    this.each(function() {
      var wrapper = $("<div class='currency-input' />");
      $(this).wrap(wrapper);
      $(this).before("<span class='currency-symbol'>$</span>");
      $(this).change(function() {
        var min = parseFloat($(this).attr("min"));
        var max = parseFloat($(this).attr("max"));
        var value = this.valueAsNumber;
        if(value < min)
          value = min;
        else if(value > max)
          value = max;
        $(this).val(value.toFixed(2)); 
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('input.currency').currencyInput();
});

.currency {
  padding-left:12px;
}

.currency-symbol {
  position:absolute;
  padding: 2px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />

Answer 4

Add step="0.01" to the <input type="number" /> parameters:

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

Demo: http://jsfiddle.net/uzbjve2u/

But the Dollar sign must stay outside the textbox... every non-numeric or separator charachter will be cropped automatically.

Otherwise you could use a classic textbox, like described here.

Answer 5

You guys are completely right numbers can only go in the numeric field. I use the exact same thing as already listed with a bit of css styling on a span tag:

<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">

Then add a bit of styling magic:

span{
  position:relative;
  margin-right:-20px
}
input[type='number']{
  padding-left:20px;
  text-align:left;
}

Answer 6

It seems that you'll need two fields, a choice list for the currency and a number field for the value.

A common technique in such case is to use a div or span for the display (form fields offscreen), and on click switch to the form elements for editing.

Answer 7

The browser only allows numerical inputs when the type is set to "number". Details here.

You can use the type="text" and filter out any other than numerical input using JavaScript like descripted here