Don't allow typing numbers between max and min value

Question

I'm working on an Angular 4 project. I have an HTML <input type="number"> with min max and step attributes. My goal is to prevent typing numbers beyond the min-max range that is user friendly. How can I do that?

function myFunction(e) { var min = -100; var max = 100; var txtValue = document.getElementById("txt").value; var pressedValue = e.key; var combined = parseFloat(txtValue, pressedValue); console.log(`OLD:${txtValue}\nNEW:${pressedValue}\nCOMBINED:${combined}`); if (combined > max) { e.preventDefault(); console.log('ohhw snapp'); } }

<input type="number" id="txt" value="Hello" onkeydown="myFunction(event)" min="-100" max="100" step="0.05">

My JSFiddle example

You can't stop someone typing in an incorrect value. Instead provide feedback to them explaining what's wrong. — evolutionxbox
– evolutionxbox, Commented Sep 20, 2017 at 15:05

Tom Dugovic · Accepted Answer · 2017-09-27 15:23:45Z

For UX reasons, I'd recommend something more like this. It may confuse the user if they just think their keyboard is not working.

$('.range-enforced').on('change', function(e){ var min=parseFloat($(this).attr('min')); var max=parseFloat($(this).attr('max')); var curr=parseFloat($(this).val()); if (curr > max) { $(this).val(max); var changed=true; } if (curr < min) { $(this).val(min); var changed=true; } if (changed) { $warning = $(this).siblings('.warning') $warning.text('Only ' + min + ' through ' + max + ' allowed'); $warning.show() $warning.fadeOut(2500); } });

input + .warning { background: #ffff99; display: inline-block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" class="range-enforced" min="-100" max="100" /> <div class="warning" style="display: none;"></div>

I don't have one on hand (I typically don't write much non-library JavaScript), but this should be possible outside of jQuery.

Andrew L · Accepted Answer · 2017-09-22 16:05:53Z

The first problem I see is you are providing 2 parameters to parseFloat which only accepts 1 (maybe you got confused with parseInt which takes 2 parameters- a string and a radix. You should combine the numbers first and do 1 parse float on the combined value.

for example

function myFunction() { var min = -100; var max = 100; var inputRef = document.getElementById("txt"); var txtValue = inputRef.value; if(isNaN(parseFloat(txtValue))){ console.log("warning input is not a number"); return; } var newNum = parseFloat(txtValue); console.log(`NEW:${newNum}`); if (newNum > max || newNum < min) { console.log('input not in range (' + min + ", " + max + ")"); inputRef.value = ""; } }

<input type="number" id="txt" onkeyup="myFunction()" min="-100" max="100" step="0.05" >

The input will reset back to empty now if the input is not in range on keyup. As per the comment above you can use this to notify the user of the problem.

Thank you, very good approach. But it isn't possible to type a value with point. eg: '15.65'
I updated the example to reset the input to empty if the user enters a number not in the range. It would be nice to also tell the user what went wrong in some fashion.

Collectives™ on Stack Overflow

Don't allow typing numbers between max and min value

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related