如何使用javascript或html设置十进制输入范围？

Question

I have an input and I need it to be limited to only these values:

Min: 0.01 max 999.99

If I use maxlength="6" I can enter, for instance, 999.99 but also 1000.1 which is not an accepted value.

What I've tried:

1st attempt (not working):

<input type="number" id="quantity" name="quantity" maxlength="6" min="0.01" max="999.99">

2nd attempt (partially working):

 let maximumFractionDigits = 2; const formatNumber = (value) => { return parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits }); } $('input[name="test"]').on('keyup',function(){ maximumFractionDigits = 2; if (.$(this).val() || (maximumFractionDigits && $(this).val().endsWith('.'))) { return } $(this).val(formatNumber($(this).val()),replace(/,/g;'')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> INPUT TEST <input type="text" maxlength="6" name="test" class="form-control"> <br>

With the second approach, I still can input weird numbers like 10000. and values like 0.0X can't be introduced (I guess it's rounded), how could I just limit the values to Min: 0.01 max 999.99 ?

Answer 1

You can check for 3 conditions, For first 2 convert number to string

1. The max length of the string should be 6 maxlength = 6

2. If string has decimal point then.split('.') and check the length of decimal numbers const decimal = input.split('.')[1]

3. Check if the number is 0.01 < number < 999.99

Answer 2

You have to methods to achieve the same

1. change the input type, and set min-max values:

<input type="number" min=0.01 max=999.99 name="test" class="form-control" aria-label="Equipment Procurement %">

2. If you don't want to change the type:

const numInput = document.querySelector(".form-control");
numInput.addEventListener("input", (event) => {
  const number = parseInt(e.target.value);
  if (number > 999.99 && number < 0.01) // throw Error or do whatever you want to do
})

Answer 3

So basically I found a solution:

 const input = document.querySelector('.example'); input.addEventListener('input', updateValue); function updateValue(e) { let number = e.target.value; number = number.toString(); if(number.match(/^\d{1,3}(\.\d{1,2})?$/)){ console.log("True"); } else{ const newNum = (e.target.value).toString().slice(0, -1) e.target.value = parseFloat(newNum); } }

 <input type="number" class="form-control example" id="quantity" name="quantity" maxlength="6" min=0.01 max=999.99>

Hope this helps if someone has the same situation