输入根据其值更改边框答案

【问题标题】：Input changes border based on its value输入根据其值更改边框
【发布时间】：2020-12-10 22:56:00
【问题描述】：

有一个接受数值的输入。如果值大于 10，则应将其边框颜色更改为红色，并显示带有文本“值太大”的工具提示。

这是输入：

<input className="my-input" type="number" />

我不知道如何将输入值连接到css，当光标在输入（:focus）内时，我已经将它的边框变为红色：

input:focus {
  border: 1px solid red;
  outline: none;
}

但是当输入值大于 10 时，如何改变边框颜色呢？并在发生时显示工具提示

【问题讨论】：

你懂Javascript吗？
是的，但如果可能的话我不想使用 jQuery
如果您在输入元素中设置最小值和最大值，Firefox 会为您执行此操作（至少在我在 Windows10 上拥有的版本上）。其他浏览器做类似的事情 - 例如Edge/Chrome 显示一个工具提示，但在我拥有的版本中它们没有用红色勾勒出元素
<input type='number' min='0' max='10' value='0' /> 应该不使用 JavaScript。至少在 Firefox 中是这样。我个人不喜欢box-shadow，所以我将其设置为box-shadow:none;，并使用JavaScript（通过设置CSS 类）控制该行为，我自己，但按照你的意愿去做。
@StackSlave 在您的情况下，我无法写入大于 10 的值。我希望能够做到这一点，并在这种情况下更改边框颜色

标签： javascript html css reactjs input

【解决方案1】：

这就是 JavaScript 的救命稻草，你应该做的是：

创建一个 css 类来指示输入的错误样式。
监听输入值变化，添加错误css类值优于 10。

很简单：

    function isValid(value) {
      return parseInt(value) <= 10;
    }

    // "input-error" is the css class for error
    const cssErrorClass = "input-error"
    function oninputchange(ev) {
      if(!isValid(ev.target.value)) {
        ev.target.classList.add(cssErrorClass)
      }
      else if(ev.target.classList.contains(cssErrorClass)) {
        ev.target.classList.remove(cssErrorClass);
      }
    }
    document.getElementById("my-input").onkeyup = oninputchange;
    document.getElementById("my-input").onchange = oninputchange;

.input-error {
  border: 1px solid red !important;
  outline: none;
}

    &lt;input id="my-input" type="number" /&gt;

【讨论】：

【解决方案2】：

您可以尝试以下适用于大多数现代浏览器的方法。

input:focus:invalid {
  border: 1px solid red;
  outline: none;
}

&lt;input type="number" max="10" /&gt;

【讨论】：

在这种情况下，您不能写入大于 9 的值。但这并不能解决我的要求。在我的情况下，用户必须能够写入任何值，如果值大于 10，则应通过将边框更改为红色来警告它
很确定你可以。尝试运行代码 sn-p :) max 只是验证输入