（Javascript）带有数字检查的oninput

Question

I'm trying to make a simple inventory systems. But I'm having problem with my oninput event.

I want to make TOTAL GOODS to be "Please input number in GOODS IN " whenever every non number value inserted into GOODS IN. But it seems I can't make it so.

 /*MAKE EVERY TABLE CLICKABLE AND SHOW ROW DATA IN INPUT TEXT*/ var tbGoods = document.getElementById('tbGoods'); for (var i = 0; i < tbGoods.rows.length; i++) { tbGoods.rows[i].onclick = function() { document.getElementById("idTxt").value = this.cells[1].innerHTML; document.getElementById("gdTxt").value = this.cells[2].innerHTML; document.getElementById("qtyTXT").value = this.cells[3].innerHTML; var qty = parseInt(document.getElementById('qtyTXT').value); var x = parseInt(document.getElementById('gdin').value); var result = qty - x; document.getElementById('totalgd').value = result; }; } /*MAKE EVERY NUMBER I PUT IN GOODS IN, TO BE CALCULATED WITHOUT SUBMIT BUTTON (ONINPUT)*/ function testmin() { var qty = parseInt(document.getElementById('qtyTXT').value); var x = parseInt(document.getElementById('gdin').value); var result = qty - x; if (document.getElementById('gdin').value === '') { document.getElementById('totalgd').value = '0'; } else if (document.getElementById('qtyTXT').value === '') { document.getElementById('totalgd').value = '0'; } else if (Number.isNaN(document.getElementById('gdin').value)) { document.getElementById('totalgd').value = 'Please Input Number in Goods In'; } else { document.getElementById('totalgd').value = result; } }

 <form method="post"> <label>ID</label> <input type="text" name="id" id="idTxt" disabled> <label>GOODS</label> <input type="text" name="goods" id="gdTxt" disabled> <label>AVAILABLE QTY</label> <input type="text" name="qty" id="qtyTXT" disabled> <label>GOODS IN</label> <input type="text" name="gdin" id="gdin" oninput="testmin()"> <br> <br> <label>Total Goods</label> <input type="text" name="totalgd" id="totalgd" value="0" disabled> <br> <input type="submit" name="submit" value="submit"> </form>

Answer 1

You don't need to code that manually. You can simply set the input type as "number" and your browser will not allow any non-numeric characters to be entered into the field.

Demo (run the snippet and try typing in the box):

 <input type="number" id="gdin" name="gdin"/>

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Answer 2

Just add type = "number" in the input label for TOTAL GOODS. It should prevent user from entering any alphabet. Except "e"

  <input type="number" name="totalgd" id="totalgd" value="0" disabled>

As pointed out, if you want to show an alert or something when an input of alphabet is there in TOTAL GOODS, you can just add

  <input type="text" name="totalgd" id="totalgd" value="0" oninput = "checkFunction()" disabled>

and in the function you can check the input for:

function checkFunction() {
 let totalGoodsIn = document.getElementById("totalgd").value; 
 let regExp = /[a-zA-Z]/g;
  
  if(regExp.test(totalGoodsIn))
  {
    //logic if alphabet is present in TOTAL GOODS
  }
  else
  {
    //logic if alphabet is not present in TOTAL GOODS
  }
 
}

if you want GOODS IN to be numeric just change the type of the label accordingly

Answer 3

 function validateNumberField() { var value = $("#numberField").val(); var pattern = /^\d+$/; var isValid = pattern.test(value); if(.isValid){ document.getElementById('totalgd');value = 'Please Input Number in Goods In'; } }

 <p>Please enter number:</p> <input type="number" id="numberField" name="numberField" oninput="validateNumberField()" />

 function validateNumberField() { var value = $("#numberField").val(); var pattern = /^\d+$/; var isValid = pattern.test(value); if(.isValid){ document.getElementById('totalgd');value = 'Please Input Number in Goods In'; } }