49

I noticed that if i use <input type="number" /> the leading zeros are not removed. I also saw a lot of discussion on how keeping leading zeros.

For example "000023" and "23" are the same number and i think that it doesn't make sense keeping those zeros.

3
  • What is it you are trying to actually do?
    – Xotic750
    Jun 3, 2015 at 16:49
  • Because i have an input that contains an amount, so is better to display it without leading zeros. Jun 3, 2015 at 17:04
  • And what is the problem you face? How to remove the leading zeros or questioning whether it is sensible to leave the leading zeros in the display?
    – Xotic750
    Jun 3, 2015 at 17:09

6 Answers 6

60

I'm going to give an example with react usage. It uses state which store the value of the field. But, I think u can replace it with whatever variable you like.

<input type='number' value={Number(this.state.myNumber).toString()}/>

In my case, myNumber stores a year number. This way, the year 2018 (for example) won't be displayed mistakenly as 02018.

4
  • 2
    Works like a charm. Also, you don't need to have the Number() part if you're doing any processing that converts it to a number. For example, in mine I am rounding the numbers so I only need this.state.myNumber.toString() May 28, 2020 at 18:40
  • 4
    This will not let you input numbers like 24.036 numbers with leading zero after decimal.
    – HVenom
    May 7, 2021 at 6:27
  • 2
    This was beautiful until I had to enter 5..7.. then move cursor to the middle, then 0, in order to get 0.507, but thanks! May 18, 2021 at 5:01
  • @RicoRodriquezCollins You can just move the cursor to the front and press ., it will automatically add 0.
    – Qwerty
    Nov 30 at 1:13
18

just use a regular expression like this

textboxText= textboxText.replace(/^0+/, '')
2
  • 1
    Really, a regular expression? why not something like +'00022'.toString()
    – Xotic750
    Jun 3, 2015 at 16:56
  • 10
    it blocks decimal seperator
    – Erlan
    Dec 26, 2017 at 11:51
5

HTML input tags always return text, not numbers, even its content can be coerced into numerical formats, dates, etc...

So next you should convert that input to an actual number format:

parseInt(myNum); // If you expect an integer.
parseFloat(myNum); // If you expect floating point number.
4
1

add step="any" to your input tag. if this does not work on your browser, change type to type="tel"

2
  • type="tel" still allows for leading zeros, although maybe it's a useful trick to filtering for whole numbers only.
    – Kalnode
    Mar 3, 2021 at 13:57
  • 1
    I was searching for an answer to DISPLAY leading zero's, or actually, to hold them on input while displaying the nice number input on mobile, seems type="tel" is the way to go!
    – Nebulosar
    May 12, 2021 at 8:37
0

Try this :

<!DOCTYPE html>
<html>
<body>

<input type="number" id="txtfield" /><button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var myNumber = document.getElementById("txtfield").value;
    document.write(parseInt(myNumber ,10));
}
</script>

</body>
</html>
0

The hack I have used when using React is to overtly convert the number into a string.
Use value=myNumber.toString(), instead of value=myNumber.
This is only required if the the input type="number", not when if type="text"`.

If your variable is initialized to null, you can prevent errors by changing falsey values to 0, as in: value=(myNumber || 0).toString().

class inputHours extends React.Component {

    this.state = { hours: 0};

    render() {
      return ( 
              <label>Hours: could show Leading 0's</label>
              <input  type="number" min="0" max="24"
                      value={this.state.hours}
                      onChange={this.onChangeHours}
              />

              <label>Hours: strips leading zeros</label>
              <input type="number" min="0" max="24"
                      value={this.state.hours.toString()}
                      onChange={this.onChangeHours}
              />
      );
    } 

In the first case, even if you strip leading zeros in the onChangeHours handler, force conversion back to an Integer via parseInt(), and call setState() to save the number devoid of leading zeros back to the state object, telling react to re-render, the input field itself does not update to remove any leading zeros.
But this issue only arises when the input type is set to "number".
If it is set to type "text", there are no issues, leading zeros are removed as expected.
In both cases, a console.log() shows that the value stored in state is indeed stripped of leading zeros (a single 0 is allowed as a value.)
even as the input field itself may show extra leading zeros.

My best guess is that internally React sees an integer 0 === 000, so it does not bother to update the display??? But in a text string, '0' != '000', so it knows it must update the rendered field.
Anyway, the overt coersion seems to force the input field to update and re-render correctly.

Update: @bitiset has a more complete answer that takes real numbers (floats, decimal points) into consideration.

If your numeric value will be a floating point number with a decimal, instead of an integer, consider using parseFloat() instead, otherwise zeros following the decimal point may get deleted, causing bugs.

However, if you overtly convert your stored value to a string before "saving" it, instead of relying on implicit coercion at read time, perhaps this issue is avoided?

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.