React Material ui input field to custom-CodePudding

Hi does anyone have any idea to make the input field behave like this example?

https://www.westpac.com.au/personal-banking/home-loans/calculator/mortgage-calculator/

we should not allow user to delete 0 and when user type should replace 0 with the value, and when we delete all the value, the cursor will always stays at the end of the first digit.

CodePudding user response：

The below code should work the way you want it.

let customInput = document.querySelector(".custom-input");
customInput.addEventListener("input", (e) => {
      if (customInput.value <= 0) return customInput.value = 0
      if (customInput.value[0] == 0) return customInput.value = customInput.value.substring(1)
})

body{
      width: 100vw;
      height: 100vh;
}

.custom-input {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      background-color: rgb(42, 46, 66);
      color: rgb(249, 249, 251);
      padding: 18px;
      font-size: 48px;
      height: 84px;
      margin-bottom: 18px;
      border-color: rgb(171, 175, 177);
}

<body>
      <input type="number"  value="800">
</body>

CodePudding user response：

I think you can use the if condition in your handleChange function, for example :

...
var result = 0;
if(input <= 0 || input == ''){
   result = 0;
} else {
   result = event.target.value;
}

this.setState({
    inputValue: result
})
...

Hope this will help you :)