Javascript 根据输入更改输入编号类型的CSS

我不确定我的要求是否可行。但我在谷歌上找不到任何东西来解决这个问题。这就是我想做的。。。我有5个输入标签，都是数字。如果值是有效数字（最大/最小值内的数字），我希望边框变为绿色；如果存在字母（或无效数字），我希望边框变为红色。昨天我试图自己解决这个问题，但没能

HTML

window.onkeyup=函数（e）{
var输入=document.getElementsByClassName（“C1”）；
对于（i=0；i

速度




熨斗




冰




大量




直径





按Enter键
重置
您应该考虑一下您的整个方法，因为在我看来，在keyup上循环所有输入元素是不必要的。可以使用
聚焦事件或类似事件

但是，为了回答您的问题，既然您检查了输入onkeyup的值，为什么不在检查后操作此元素的样式呢：

window.onkeyup = function(e) {
     var formValid = true;

     var inputs = document.getElementsByClassName("C1");
     for (i = 0; i < inputs.length; i++) {
         inputsVal = inputs[i].value;
         if (!inputsVal || inputsVal == "" || inputsVal == " ") {
              formValid = false;
              inputs[i].style.borderColor= "red";
         } else {
              inputs[i].style.borderColor= "green";
         }
     }

     document.getElementById('enterSign').style.display = "block";
     document.getElementById('spacer').style.display = "none";
     if (event.which == 13) {
         saveitem();
     }

     return formValid;
};


您希望这样做，将事件绑定到每个输入，这样它们就可以单独处理自己，而不是在窗口的所有按键上循环处理它们

var inputs = document.getElementsByClassName('C1');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("keyup", function(e) {
        var input = e.target;
        // Check for number
        if (e.target.value) {
            input.style.borderColor= "green";
        } else {
             input.style.borderColor= "red";
        }
    });   
}

一种方法是：

window.onkeyup = function(e) {

  // getting all the <input> elements with the class of 'C1':
  var inputs = document.querySelectorAll('.C1'),

  // variables for later use within the loop:
    current, min, max, test;

  // iterating over the <input> elements with a
  // for loop:
  for (var i = 0, len = inputs.length; i < len; i++) {

    // caching the current <input> element:
    current = inputs[i];

    // getting the value of the min and max attributes,
    // parsed as a number in base 10:
    min = parseInt(current.min, 10);
    max = parseInt(current.max, 10);

    // testing whether the current value is
    // equal to, or greater than, the min AND
    // is equal to, or less than, the max:
    isValid = current.value >= min && current.value <= max;

    // if the current value is not the default value
    // (so the user has made a change to the held value):
    if (current.value !== current.defaultValue) {

      // if the number is valid:
      if (isValid) {

        // we remove the 'invalid' class-name (if it's there):
        current.classList.remove('invalid');

        // we add the 'valid' class-name:
        current.classList.add('valid');
      } else {

        current.classList.remove('valid');
        current.classList.add('invalid');
      }
    }
  }


  document.getElementById('enterSign').style.display = "block";
  document.getElementById('spacer').style.display = "none";
  if (event.which == 13) {
    saveitem();
  }
};


速度




熨斗




冰




大量




直径





按Enter键
重置
首先，我会将事件绑定到输入字段，而不是窗口。这样，您就不会监听每一个触发的onkeyup事件。然后，您必须获得最小值和最大值，比较这些值并进行颜色（css/样式）更改

这里有一个不完整的例子。我所说的“不完整”是指它并没有考虑到所有的场景——例如，使用向上和向下按钮并编写文本而不是数字。但它会给你一个如何实现的想法。当然，它也会满足您的要求：）

注意：我创建了两个css类无效和有效。我相信样式应该由css来完成，而不是javascript——类非常适合这样做

var inputs = document.getElementsByClassName('C1');

for (var j = 0; j < inputs.length; j++){
  var input = inputs[j];
  input.addEventListener('keyup', function(e){
    var ele = e.target;
    var inputsVal = ele.value;

    var min = parseInt(ele.getAttribute("min"));
    var max = parseInt(ele.getAttribute("max"));

    console.log(ele, inputsVal, min, max);
    if (inputsVal && inputsVal <= max && inputsVal >= min) {
      ele.classList.add('valid');
      ele.classList.remove('invalid');
    }else {
      ele.classList.add('invalid');
      ele.classList.remove('valid');
    }
  });
}


速度




熨斗




冰




大量




直径





按Enter键
重置
u可以使用jQuery并监听输入上的模糊


jQuery（'input[type=number]'）。在（'blur'，function（）上{
var min=$（this.attr（'min'）；
var max=$（this.attr（'max'）；
如果（很好，这是一个好的开始。：）我肯定我能想出如何进一步玩这个。我会等我接受之前，但我喜欢这个。我可以把红色改成黑色。这会给它一个很好的感觉，让它与我的循环竞争。但我也会尝试学习更好的方法。谢谢你，我真的很感激。你回答了我的问题问题，为我提供了参考以了解更多信息，您在代码中给出了注释以解释发生了什么。谢谢！非常欢迎您，我很高兴能够提供帮助！：）回答确实不错，但你也应该提到，不应该使用这个概念，因为在每个键控上循环所有输入是不必要的。在页面上的每个元素上听
keyup
，然后迭代所有输入并不是一种性能或可伸缩的方法。我会看看我在回答中提到的事件委托。但是验证函数本身仍然很有用。我会小心地将事件绑定到窗口，就像这样。绝对，我同意你们两个-Kryptik和Matt-因此我建议使用CSS；只是我还没有机会添加其他信息。
window.onkeyup = function(e) {

  // getting all the <input> elements with the class of 'C1':
  var inputs = document.querySelectorAll('.C1'),

  // variables for later use within the loop:
    current, min, max, test;

  // iterating over the <input> elements with a
  // for loop:
  for (var i = 0, len = inputs.length; i < len; i++) {

    // caching the current <input> element:
    current = inputs[i];

    // getting the value of the min and max attributes,
    // parsed as a number in base 10:
    min = parseInt(current.min, 10);
    max = parseInt(current.max, 10);

    // testing whether the current value is
    // equal to, or greater than, the min AND
    // is equal to, or less than, the max:
    isValid = current.value >= min && current.value <= max;

    // if the current value is not the default value
    // (so the user has made a change to the held value):
    if (current.value !== current.defaultValue) {

      // if the number is valid:
      if (isValid) {

        // we remove the 'invalid' class-name (if it's there):
        current.classList.remove('invalid');

        // we add the 'valid' class-name:
        current.classList.add('valid');
      } else {

        current.classList.remove('valid');
        current.classList.add('invalid');
      }
    }
  }


  document.getElementById('enterSign').style.display = "block";
  document.getElementById('spacer').style.display = "none";
  if (event.which == 13) {
    saveitem();
  }
};

var inputs = document.getElementsByClassName('C1');

for (var j = 0; j < inputs.length; j++){
  var input = inputs[j];
  input.addEventListener('keyup', function(e){
    var ele = e.target;
    var inputsVal = ele.value;

    var min = parseInt(ele.getAttribute("min"));
    var max = parseInt(ele.getAttribute("max"));

    console.log(ele, inputsVal, min, max);
    if (inputsVal && inputsVal <= max && inputsVal >= min) {
      ele.classList.add('valid');
      ele.classList.remove('invalid');
    }else {
      ele.classList.add('invalid');
      ele.classList.remove('valid');
    }
  });
}

jQuery('input[type=number]').on('blur',function(){
var min = $(this).attr('min');
var max = $(this).attr('max');
if(min <= $(this).val() && $(this).val() <= max ) $(this).css('border','1px solid green');
});