How to make starting value in input and replacing this value while keyboard input?

Question

How to make starting value 0.00 in input?
And how to replacing this value while keyboard input? (if type 1 from keyboard: 0.01, 0.11, 1.11)

h1 {
  font-size: 20px;
}

input {
  height: 45px;
  width: 300px;
  font-size: 30px;
  direction: rtl;
}

<h1>starting value 0.00</h1>
<h1>if type 1 from keyboard update value as 0.01</h1>
<h1>if type next 1 from keyboard update value as 0.11</h1>
<h1>if type next 1 from keyboard update value as 1.11</h1>
<input type="text">

Hi, what if user enter 0 in input box? – Mohammadreza Imani Jun 09 '19 at 10:54 — Mohammadreza Imani, Jun 09 '19 at 10:54
if user enter 0 in input we get 0.00 again – Zeroone Jun 09 '19 at 10:57 — Zeroone, Jun 09 '19 at 10:57

score 0 · Answer 1 · answered Jun 09 '19 at 11:22

in html in the markup of your input element, have this: oninput="this.value = this.value.toFixed(2)"

So this would look like in your markup:

<input
oninput="this.value = this.value.toFixed(2)"
/>

Now toFixed() transforms the thing into a string as well so it might not be what you're trying to do, it seems that adding those two decimal places and how to do it best to be compatible across all browsers and consisten is still up for debate, these stackoverflow threads are full of options: Round to at most 2 decimal places (only if necessary) JavaScript math, round to two decimal places [duplicate]

score 0 · Accepted Answer · answered Jun 10 '19 at 14:20

document.querySelector('input').addEventListener('keypress', function(e) {
  e.preventDefault();

  const
    oldVal = this.value,
    newVal = oldVal.replace(/(0)(?!.*\1)/, e.key);

  this.value = newVal === oldVal ? `${e.key}${oldVal}` : newVal;
});

h1 {
  font-size: 20px;
}

input {
  height: 45px;
  width: 300px;
  font-size: 30px;
  direction: rtl;
}

<h1>starting value 0.00</h1>
<h1>if type 1 from keyboard update value as 0.01</h1>
<h1>if type next 1 from keyboard update value as 0.11</h1>
<h1>if type next 1 from keyboard update value as 1.11</h1>
<input type="text" value="0.00">

How to make starting value in input and replacing this value while keyboard input?

2 Answers2