javascript - 根据输入更改输入数字类型的 CSS

标签 javascript css html

我不确定我问的是否可行。但我在谷歌上找不到任何东西来解决这个问题。这就是我想要做的......我有 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。

最佳答案

一种方法如下:

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 Fiddle demo .

上述方法有 window '听' keyup交互以提供事件处理，这意味着该事件不仅必须从 <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 Fiddle demo .

或者您可以使用 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 Fiddle demo .

当然还有范围选择器 — :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 Fiddle demo .

引用资料:

关于javascript - 根据输入更改输入数字类型的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30399388/

上一篇：javascript - 使用 Javascript 读取文本文件

下一篇：javascript - 行删除不起作用

相关文章：

javascript - 打破 jQuery 循环与原生 JS for 循环。哪个更好？

javascript - 固定导航栏顶部的自动完成列表

CSS Font Face 在 Firefox 或 IE8 中不起作用

javascript - 何时执行动态加载到 head 中的 CSS

jquery - 在一页中创建多个 slider

javascript - 我可以多次调用 fbq ('init' ) 以使用新的像素功能吗？

Javascript forEach() 在 IE 中不起作用

javascript - 必须为 EventListener 按两次键(javascript)

javascript - 如何缓存文本区域？

html - 在 css 中为两个不同的闪烁类创建两种不同的样式

©2024 IT工具网  联系我们