如何在输入中创建起始值并在键盘输入时替换此值？

Question

1. How to make starting value 0.00 in input?
2. 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"> 

Answer 1

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]

Answer 2

 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">