Prevent negative numbers but allow decimals in input

Question

The code below prevents negative numbers in input for numbers but does not allow me to enter decimals if I clear input and try to enter let's say 0.41

<input class='input2' oninput="this.value = 
 !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null" type='number' step='0.1' id='success' />

Update The code below allows decimals and prevents negative numbers but it does not allow me to place any condition. I also want to have one more condition of value can't be greater than 1: max = "1" not working

<input class='input2' min="0" max = "1" onkeypress="return event.charCode != 45" type='number' step='0.1' id='success'/>

Seems odd to do the validation on input and not when they are done. — epascarello, Mar 31 '22 at 18:26
@nicael seriously? I have posted what I have tried. It's a reproducible example. — Ujjawal Bhandari, Mar 31 '22 at 18:27
What does your "*does not allow me to enter decimals*" mean? I see no problem entering them. — PM 77-1, Mar 31 '22 at 18:28
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number — Jared Smith, Mar 31 '22 at 18:31

DCR · Answer 1 · 2022-03-31T19:13:11.127

-1

var input = document.getElementById("success");


input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    if (input.value < 0)input.value = -input.value
    if(input.value > 1)input.value = 1
  }
});

<input class='input2' min=0 max=1 type='number' step='0.1' id='success' />

edited Mar 31 '22 at 19:13

answered Mar 31 '22 at 19:05

DCR

14,737
12
52
115

snippet updated for max condition – DCR Mar 31 '22 at 19:11
I didn't downvote, but I could see why someone did (if I squint hard enough). You could probably explain what an event listener is and how it works with that `input` variable, etc. This is just a simple code dump, albeit commented and relatively clear for those who know JS in any capacity. – Tim Lewis Mar 31 '22 at 19:13
Thanks. Not sure but when I am checking your solution - it's neither preventing negative numbers nor max – Ujjawal Bhandari Mar 31 '22 at 19:13
1

enter -5 and hit enter – DCR Mar 31 '22 at 19:14
Oh my bad. Apologies. Can we have it in "oninput" instead of "keyup"? – Ujjawal Bhandari Mar 31 '22 at 19:15
no, not this way – DCR Mar 31 '22 at 19:17

Prevent negative numbers but allow decimals in input

1 Answers1