(Javascript) oninput with numbercheck

Question

我正在尝试制作一个简单的库存系统。但是我的 oninput 事件有问题。

每当每个非数字值插入 GOODS IN 时，我都想让 TOTAL GOODS 成为“请在 GOODS IN 中输入数字”。但是我好像做不到。

/*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

您不需要手动编码。您只需将输入类型设置为“数字”，您的浏览器将不允许在该字段中输入任何非数字字符。

演示（运行片段并尝试在框中输入）：

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

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

Answer 2

只需在 TOTAL GOODS 的输入标签中添加 type = "number"。它应该防止用户输入任何字母表。除了“e”

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

如前所述，如果您想在 TOTAL GOODS 中输入字母表时显示警报或其他内容，您只需添加

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

并且在函数中您可以检查输入：

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
  }
 
}

如果您希望 GOODS IN 为数字，只需相应地更改标签类型

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()" />

(Javascript) oninput with numbercheck

(Javascript) oninput with numbercheck

html

javascript

validation