svelte
svelte copied to clipboard
Automatically remove leading zeros in number inputs
Describe the problem
The problem:
The displayed value of the number input field can be: 000100
But I want: 100
Svelte automatically converts number
-inputs from string
to number
, which is awesome.
However, converting it to a string
to remove the leading zeros and then to a number again, which usually solves the issue, results in the same value and thus Svelte does not trigger a render of the "new " value.
Describe the proposed solution
It should just work automatically.
Alternatives considered
I am still searching for ways to solve this problem.
Importance
would make my life easier
Do you have a REPL showing what you're trying to do now? This sounds like #7696, which is related to how reactivity works.
@Conduitry For some reason the window to authenticate with my Github instantly closes on the repl, but here is the code for the repl:
<script>
let input
let value = 100
function removeLeadingZeros() {
value = Number( value.toString()) // Usually removes leading zeros
}
</script>
<input type="number" bind:value
on:input={removeLeadingZeros}
bind:this={input}
id="x"
>
<p>
^ It is possible to input the "number" 00100
</p>
<div>
Numeric value of the variable:
{value}
</div>
And yes, it is basically #7696 and the answer of @stephane-vanraes solves it quite well. (Thanks man :) ) I just think that there is no use-case for the leading zeros and that it might be a nice feature for Svelte to do this automatically.