Question

如何使用 JavaScript 将输入input字段（数字）的数字限制为大于其他数字？

我用过：

function numberalert(e) {
    var matrictotal = document.getElementById("matrictotal").value;
    var matricobtained = document.getElementById("matricobtained").value;
    var intertotal = document.getElementById("intertotal").value;
    var interobtained = document.getElementById("interobtained").value;
    var bachelortotal = document.getElementById("bachelortotal").value;
    var bachelorobtained = document.getElementById("bachelorobtained").value;
    var mphilltotal = document.getElementById("mphilltotal").value;
    var mphillobtained = document.getElementById("mphillobtained").value;

    if (matricobtained > matrictotal || interobtained > intertotal || bachelorobtained > bachelortotal || mphillobtained > mphilltotal) {
        alert("pleses provide obtained marks less then total marks");
        e.returnValue = false;
        e.preventDefault();
    } else {
        return true;
    }
}

但警告后，它允许在input字段中放置号码。

Answer 1

首先，只需获取代表每个对象的对象，然后将这两个方法传递给一个help方法来进行实际比较。如果值不是您要查找的值，请将对象value设置为""并突出显示textbox以显示哪个错误。

＆＃13;

function numberalert(e) {
  var matrictotal = document.getElementById("matrictotal");
  var matricobtained = document.getElementById("matricobtained");
  var intertotal = document.getElementById("intertotal");
  var interobtained = document.getElementById("interobtained");
  var bachelortotal = document.getElementById("bachelortotal");
  var bachelorobtained = document.getElementById("bachelorobtained");
  var mphilltotal = document.getElementById("mphilltotal");
  var mphillobtained = document.getElementById("mphillobtained");
  checkValue(matrictotal, matricobtained);
  checkValue(intertotal, interobtained);
  checkValue(bachelortotal, bachelorobtained);
  checkValue(mphilltotal, mphillobtained);

}

function checkValue(total, obtained){
  if (obtained.value > total.value) {
    alert("Please provide obtained marks less then total marks: " + obtained.id);
    obtained.value = "";
    obtained.classList.add("error");
  } else {
    obtained.classList.remove("error");
    return true;
  }
}

＆＃13;

.error {
    border: 2px solid #FF0000;
}

＆＃13;

<label for="matrictotal">matrictotal</label>
    <input type="text" id="matrictotal" value="10">
    <label for="matricobtained">matricobtained</label>
    <input type="text" id="matricobtained" value="10">
    <br />
    <label for="intertotal">intertotal</label>
    <input type="text" id="intertotal" value="10">
    <label for="interobtained">interobtained</label>
    <input type="text" id="interobtained" value="10">
    <br />
    <label for="bachelortotal">bachelortotal</label>
    <input type="text" id="bachelortotal" value="10">
    <label for="bachelorobtained">bachelorobtained</label>
    <input type="text" id="bachelorobtained" value="10">
    <br />
    <label for="mphilltotal">mphilltotal</label>
    <input type="text" id="mphilltotal" value="10">
    <label for="mphillobtained">mphillobtained</label>
    <input type="text" id="mphillobtained" value="10">

    <button onclick=numberalert(this)>Check values</button>

＆＃13;

Answer 2

注意：在Javascript中，没有严格大于或严格小于比较器。

如果您需要严格超过使用

（a！== b＆amp;＆amp; a＆gt; b）（或）（！（a＆lt; b））

同样严格要求使用

（a！== b＆amp;＆amp; a＆lt; b）（或）（！（a＆gt; b））

var toCheckNumber = 100;
validate = function(el, event) {
var errorText = document.getElementById('errorText');
  errorText.innerHTML = "";
  var x = event.which;
  var value = el.value;
  var number = 0;
  switch (x) {
    case 48: number =0;break;
    case 49: number = 1; break;
    case 50: number = 2; break;
    case 51: number = 3; break;
    case 52: number = 4; break;
    case 53: number = 5; break;
    case 54: number = 6; break;
    case 55: number = 7; break;
    case 56: number = 8; break;
    case 57: number = 9; break;
    case 8: number = -1; break;
    case 46: number = -1; break;
    default : event.preventDefault(); return ;
  }
  var tempval = (number !== -1) ? value * 10 + number : value;
  if (!(tempval < toCheckNumber)) {
    event.preventDefault();
    errorText.innerHTML = "Enter number less than " + toCheckNumber;
  }
}

<input type="number" onkeydown="validate(this,event)" onchange="document.getElementById('errorText').innerHTML=''">
<div id="errorText" style="color:red"></div>

限制输入字段

2 个答案: