So if someone else stumbles upon this here is a JavaScript solution to this problem:

onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

or in the html code if you so prefer

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Step 2: Write the setTwoDecimalPlace method

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

By changing the '2' in toFixed you can get more or less decimal places if you so prefer.

So if someone else stumbles upon this here is a JavaScript solution to this problem:

onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

or in the html code if you so prefer

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Step 2: Write the setTwoDecimalPlace method

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

By changing the '2' in toFixed you can get more or less decimal places if you so prefer.

an inline solution combines Groot and Ivaylo suggestions in the format below:

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"

This is not working, becouse if you have a placeholder it will take by default that value and you can't change it in input.

an inline solution combines Groot and Ivaylo suggestions in the format below:

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"

This is not working, becouse if you have a placeholder it will take by default that value and you can't change it in input.

What other folks posted here mainly worked, but using onchange doesn't work when I change the number using arrows in the same direction more than once. What did work was oninput. My code (mainly borrowing from MC9000):

<input class="form-control" oninput="setTwoNumberDecimal(this)" step="0.01" value="0.00" type="number" name="item[amount]" id="item_amount">

function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };

What other folks posted here mainly worked, but using onchange doesn't work when I change the number using arrows in the same direction more than once. What did work was oninput. My code (mainly borrowing from MC9000):

<input class="form-control" oninput="setTwoNumberDecimal(this)" step="0.01" value="0.00" type="number" name="item[amount]" id="item_amount">

function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };

I'm saving it with a backbone model that uses a float for this data, so thats not the problem. I just want to have the number displayed in the text box have two decimal places.

Nevermind, I misunderstood what you were saying... it shall be done this weigh

I'm saving it with a backbone model that uses a float for this data, so thats not the problem. I just want to have the number displayed in the text box have two decimal places.

Nevermind, I misunderstood what you were saying... it shall be done this weigh

You can use Telerik's numerictextbox for a lot of functionality

<input id="account_rate" data-role="numerictextbox" data-format="#.000" data-min="0.001" data-max="100" data-decimals="3" data-spinners="false" data-bind="value: account_rate_value" onchange="APP.models.rates.buttons_state(true);" />

You can use Telerik's numerictextbox for a lot of functionality

<input id="account_rate" data-role="numerictextbox" data-format="#.000" data-min="0.001" data-max="100" data-decimals="3" data-spinners="false" data-bind="value: account_rate_value" onchange="APP.models.rates.buttons_state(true);" />

Look into toFixed for Javascript numbers. You could write an onChange function for your number field that calls toFixed on the input and sets the new value.

This is just a minimalist solution, but yes using jQuery could make the OPs life easier.

onBlur

Look into toFixed for Javascript numbers. You could write an onChange function for your number field that calls toFixed on the input and sets the new value.

This is just a minimalist solution, but yes using jQuery could make the OPs life easier.

onBlur

So if someone else stumbles upon this here is a JavaScript solution to this problem:

onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

or in the html code if you so prefer

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Step 2: Write the setTwoDecimalPlace method

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

By changing the '2' in toFixed you can get more or less decimal places if you so prefer.

Pure html is not able to do what you want. My suggestion would be to write a simple javascript function to do the roudning for you.

I'm saving it with a backbone model that uses a float for this data, so thats not the problem. I just want to have the number displayed in the text box have two decimal places.

Nevermind, I misunderstood what you were saying... it shall be done this weigh

Look into toFixed for Javascript numbers. You could write an onChange function for your number field that calls toFixed on the input and sets the new value.

This is just a minimalist solution, but yes using jQuery could make the OPs life easier.

The accepted solution here is incorrect. Try this in the HTML:

onchange="setTwoNumberDecimal(this)"

function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };

The accepted solution here is incorrect. Try this in the HTML:

onchange="setTwoNumberDecimal(this)"

function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };

As far as my knowledge in Javascript and HTML goes there is no 'easy solution' for this. Working with both 'raw' JS and ExtJs forms has learned me that there are multiple ways to focus and manipulate a field. Which makes it hard to manipulate the inner value at the right time.

You want your logic to run at all the times something happens to the field. The following link provides you with the options: http://www.w3schools.com/TAGS/ref_eventattributes.asp

When you use onchange it will trigger when someone changes the values after you blur the field (you click or tab away from the field). So that's no good.

You could try the key (up, down, press) events. But that excludes when you paste a value.

Long story short, you could in theory try to implement a function on every event you could think of to make sure you catch the users input and do what you want with it.

My solution is, start a timer when you focus a field and validate the value and do further logic. And finalize everything you wanted to do on blur.

Determining the correctness of the value

You could write some nifty regex or a single line statement that tells you if the value is correct. It's all the same in the end, it should fit your needs.

var inputVar = element.value;
var inputFloat = parseFloat(inputVar);
var normalizeInput = Math.round(inputFloat * 100) / 100;
if(inputFloat > 0 && normalizeInput == inputFloat){
    #correct value
}else{
   #incorrect value
}

Now you want to handle the user input and do something. Things like setting the field to disabled or read only would prevent further input and changes, but would not let your users do anything to your field.

As what I read is you want the field to not change in function, you want to be able to edit it.

So that leaves you with 2 options:

Editing the field content directly by overriding the element.value with the desired value.

Manipulating key inputs / selection to try and keep the cursor at same position the user left it while correcting the false input.

I would opt for the former as it is a lot less of a hassle, although it might mess with the cursor position (browser dependant).

So what I propose combining all the above:

In the function run then, you check if there is a previous value set.

The first time it is NOT so: You have to hold this previous value somewhere, you could hold it in a variable within javascript or put it in to the field in the DOM.

var inputElement.setAttribute('old_value', oldValue);

Now you check if this value is correct before saving it, else just default it back to blank (or attempt to normalise the value to something that validates, you could keep cutting away characters at the right for example).

Now on each run you check if the value is correct. If the value is correct, you hold the new value as the 'new' previous value (and calling setTimeout again if you use that method).

If it is not correct you write back the old value or attempt to normalise the input value and if that fails use the last correct value.

(Alternatively you could check if the document.activeElement is the same as the one that is run on this 'loop' so it knows when to stop).

On blur you check the value one last time and do the same logic to prevent false input.

Use the HTML5 number input field:

Try <input type="number" step="0.01" /> if you are targeting 2 decimal
places :-).

edited Apr 27 '15 at 18:10
Andre Figueiredo

Which only works on browsers that support it.