根據輸入更改輸入數字類型的CSS

Question

我不確定我的要求是否可行。 但我無法在谷歌上找到任何解決這個問題的方法。 這是我正在嘗試做的...我有5個輸入標簽，所有這些都是數字。 如果值是有效數字（最大/最小值內的數字），如果存在字母（或無效數字），我希望邊框變為綠色，我希望邊框變為紅色。 我試圖在昨天自己解決這個問題，但不能。

HTML

  window.onkeyup = function(e) { var inputs = document.getElementsByClassName("C1"); for (i = 0; i < inputs.length; i++) { inputsVal = inputs[i].value; if (!inputsVal || inputsVal == "" || inputsVal == " ") { return false } } document.getElementById('enterSign').style.display = "block"; document.getElementById('spacer').style.display = "none"; if (event.which == 13) { saveitem(); } }; 

 <div id='nav'> <label for='speed'>&nbsp;Speed <br /> <input type='number' class='C1' id='speed' placeholder='1-10' max='10' min='1' /> </label> <br /> <label for='Iron'>&nbsp;Iron <br /> <input type='number' class='C1' id='Iron' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Ice'>&nbsp;Ice <br /> <input type='number' class='C1' id='Ice' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Mass'>&nbsp;Mass <br /> <input type='number' class='C1' id='Mass' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Diameter'>&nbsp;Diameter <br /> <input type='number' class='C1' id='Diameter' placeholder='1-5' max='5' min='1' /> </label> <br /> <center> <p id='spacer'>&nbsp;</p> <p id='enterSign' onclick='saveitem()'>Press Enter</p> </center> <center> <button id='btnReset' onclick='resetPage()'>Reset</button> </center> </div> 

目前，除非輸入所有字段，否則代碼將返回false。 然后會出現一個div，指示用戶按Enter鍵。 但在此之前，我希望用戶在進入下一個字段之前了解哪些信息是有效的。 提前感謝任何可以幫助我解決此問題的人，並幫助我了解有關如何使用JavaScript處理這些事情的更多信息。 （請，沒有jquery或其他庫。）我正在嘗試自學JS。

Answer 1

一種方法如下：

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();
  }
};

 window.onkeyup = function(e) { var inputs = document.querySelectorAll('.C1'), current, min, max, test; for (var i = 0, len = inputs.length; i < len; i++) { current = inputs[i]; min = parseInt(current.min, 10); max = parseInt(current.max, 10); isValid = current.value >= min && current.value <= max; if (current.value !== current.defaultValue) { if (isValid) { current.classList.remove('invalid'); 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(); } }; 

 .valid { border-color: limegreen; } .invalid { border-color: red; } 

 <div id='nav'> <label for='speed'>&nbsp;Speed <br /> <input type='number' class='C1' id='speed' placeholder='1-10' max='10' min='1' /> </label> <br /> <label for='Iron'>&nbsp;Iron <br /> <input type='number' class='C1' id='Iron' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Ice'>&nbsp;Ice <br /> <input type='number' class='C1' id='Ice' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Mass'>&nbsp;Mass <br /> <input type='number' class='C1' id='Mass' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Diameter'>&nbsp;Diameter <br /> <input type='number' class='C1' id='Diameter' placeholder='1-5' max='5' min='1' /> </label> <br /> <p id='spacer'>&nbsp;</p> <p id='enterSign' onclick='saveitem()'>Press Enter</p> <button id='btnReset' onclick='resetPage()'>Reset</button> </div> 

JS小提琴演示 。

上面的方法為keyup交互提供了“監聽” window ，以便提供事件處理，這意味着該事件不僅必須從<input>元素一直傳播到每個祖先元素之前。函數將被調用，也可能意外地在其中一個父元素上調用event.stopPropagation() ，這取決於被停止的事件傳播，可能會阻止調用該函數。

當然，您可以將事件監聽器附加到<input>元素的更近的共同祖先，例如父<div> ：

var commonAncestor = document.getElementById('nav');

commonAncestor.onkeyup = function(e) {
 // ... all contents removed for brevity
};

 var commonAncestor = document.getElementById('nav'); commonAncestor.onkeyup = function(e) { var inputs = document.querySelectorAll('.C1'), current, min, max, test; for (var i = 0, len = inputs.length; i < len; i++) { current = inputs[i]; min = parseInt(current.min, 10); max = parseInt(current.max, 10); isValid = current.value >= min && current.value <= max; if (current.value !== current.defaultValue) { if (isValid) { current.classList.remove('invalid'); 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(); } }; 

 .valid { border-color: limegreen; } .invalid { border-color: red; } 

 <div id='nav'> <label for='speed'>&nbsp;Speed <br /> <input type='number' class='C1' id='speed' placeholder='1-10' max='10' min='1' /> </label> <br /> <label for='Iron'>&nbsp;Iron <br /> <input type='number' class='C1' id='Iron' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Ice'>&nbsp;Ice <br /> <input type='number' class='C1' id='Ice' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Mass'>&nbsp;Mass <br /> <input type='number' class='C1' id='Mass' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Diameter'>&nbsp;Diameter <br /> <input type='number' class='C1' id='Diameter' placeholder='1-5' max='5' min='1' /> </label> <br /> <p id='spacer'>&nbsp;</p> <p id='enterSign' onclick='saveitem()'>Press Enter</p> <button id='btnReset' onclick='resetPage()'>Reset</button> </div> 

JS小提琴演示 。

或者您可以使用CSS實現此功能，使用:valid和:invalid選擇器：

:valid {
  border-color: green;
}
:invalid {
  border-color: red;
}

 :valid { border-color: green; } :invalid { border-color: red; } 

 <div id='nav'> <label for='speed'>&nbsp;Speed <br /> <input type='number' class='C1' id='speed' placeholder='1-10' max='10' min='1' /> </label> <br /> <label for='Iron'>&nbsp;Iron <br /> <input type='number' class='C1' id='Iron' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Ice'>&nbsp;Ice <br /> <input type='number' class='C1' id='Ice' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Mass'>&nbsp;Mass <br /> <input type='number' class='C1' id='Mass' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Diameter'>&nbsp;Diameter <br /> <input type='number' class='C1' id='Diameter' placeholder='1-5' max='5' min='1' /> </label> <br /> <p id='spacer'>&nbsp;</p> <p id='enterSign' onclick='saveitem()'>Press Enter</p> <button id='btnReset' onclick='resetPage()'>Reset</button> </div> 

JS小提琴演示 。

當然，范圍選擇器 - :in-range和:out-of-range - 提供與上述類似的功能：

:in-range {
  border-color: green;
}
:out-of-range {
  border-color: red;
}

 :in-range { border-color: green; } :out-of-range { border-color: red; } 

 <div id='nav'> <label for='speed'>&nbsp;Speed <br /> <input type='number' class='C1' id='speed' placeholder='1-10' max='10' min='1' /> </label> <br /> <label for='Iron'>&nbsp;Iron <br /> <input type='number' class='C1' id='Iron' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Ice'>&nbsp;Ice <br /> <input type='number' class='C1' id='Ice' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Mass'>&nbsp;Mass <br /> <input type='number' class='C1' id='Mass' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Diameter'>&nbsp;Diameter <br /> <input type='number' class='C1' id='Diameter' placeholder='1-5' max='5' min='1' /> </label> <br /> <p id='spacer'>&nbsp;</p> <p id='enterSign' onclick='saveitem()'>Press Enter</p> <button id='btnReset' onclick='resetPage()'>Reset</button> </div> 

JS小提琴演示 。

參考文獻：

• CSS：
  • 有效性選擇器， :invalid和:valid 。
• JavaScript的：
  • Element.classList API 。
  • for (initialisation; assessment; change) {...}循環 。
  • HTMLInputElement -為（有限的）信息HTMLInputElement.defaultValue 。
  • parseInt() 。

Answer 2

你應該考慮你的整個方法，因為在我看來，循環遍歷所有輸入元素onkeyup是不必要的。 也許使用focus out事件或類似的東西。

但是要回答你的問題，既然你檢查輸入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;
};

但是，這會在每次按鍵后立即改變所有輸入的顏色。

這是一個示例小提琴： https ： //jsfiddle.net/hu2amocq/

另外要提一下：由於你使用的是input type="number"大多數瀏覽器會將控制按鈕添加到表單元素中，正如你在小提琴中看到的那樣。 使用這些來增加/減少數字不會觸發window.onkeyup事件。

---

更好的方法

正如我在開始時所說的，你應該考慮你的概念，只在必要時評估輸入，只改變一個輸入。

請查看http://www.w3schools.com/jsref/dom_obj_event.asp並使用其中列出的其中一個事件。 例如這樣：

<input type="number" onkeyup="validate('speed')" id="speed" />

validate = function(id) {
      var input = document.getElementById(id);
      var value = input.value.trim();
      if (value && value.length > 0) {
          document.getElementById(id).style.borderColor = "green";
      } else {
          document.getElementById(id).style.borderColor = "red";
     }
 }

Answer 3

https://jsfiddle.net/t3ktjez2/

你想做這樣的事情，你把事件綁定到每個輸入，這樣他們就可以單獨處理它們，而不是在按下窗口時循環遍歷它們。

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";
        }
    });   
}

編輯：實際上，執行此操作的最#nav方法是讓keyup事件冒泡到#nav元素，然后在那里進行檢查。

https://jsfiddle.net/t3ktjez2/1/

這意味着您不必將許多事件綁定到每個輸入，而是具有檢查哪個元素導致keyup事件的事件。

var nav = document.getElementById('nav');
nav.addEventListener("keyup", function(e) {
    var el = e.target;
    if (el.className === 'C1') {
        // The element that trigger this event is an input so do check
        if (el.value) { // Do a real value check here
            el.style.borderColor = "green";
        } else {
            el.style.borderColor = "red";
        }   
    }
});   

Answer 4

首先，我將事件綁定到輸入字段而不是窗口。 這樣你就不會監聽每個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');
    }
  });
}

 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'); } }); } 

 .invalid { border-color:red; } .valid{ border-color:green; } 

 <div id='nav'> <label for='speed'>&nbsp;Speed <br /> <input type='number' class='C1' id='speed' placeholder='1-10' max='10' min='1' /> </label> <br /> <label for='Iron'>&nbsp;Iron <br /> <input type='number' class='C1' id='Iron' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Ice'>&nbsp;Ice <br /> <input type='number' class='C1' id='Ice' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Mass'>&nbsp;Mass <br /> <input type='number' class='C1' id='Mass' placeholder='1-5' max='5' min='1' /> </label> <br /> <label for='Diameter'>&nbsp;Diameter <br /> <input type='number' class='C1' id='Diameter' placeholder='1-5' max='5' min='1' /> </label> <br /> <center> <p id='spacer'>&nbsp;</p> <p id='enterSign' onclick='saveitem()'>Press Enter</p> </center> <center> <button id='btnReset' onclick='resetPage()'>Reset</button> </center> </div> 

Answer 5

你可以使用jQuery並監聽輸入上的模糊

小提琴

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');
});

這只是建議:)