Javascript 如何突出显示可选输入：文本（如果不是'）；你没有空吗？

我找到了

：必需的

输入的解决方案，但

：可选的

没有

---

谢谢你的帮助，对不起我的英语，这不是我的母语

注意：如果您的目标是现代浏览器并使用占位符（或者您可以使用占位符），您可以使用下面的伪类而不是

.empty）

并删除JavaScript。它不适用于IE或Edge v44或更早版本，但适用于所有最新的现代浏览器。但是：您可以对IE和Edge v44及更早版本使用

-ms输入占位符

，使下面的JavaScript部分失效。但我不想将其编辑为使用显示的

：占位符和
：-ms输入占位符，因为这与Irina的答案（有些重复），并且我无法删除此答案，因为它已被接受。不过，请参见答案末尾的示例


我找到的解决方案是：必需的输入，而不是：可选的

有两种方法可以做到这一点：

您可以使用
：not（：required）
<代码>：not
是最新版本。它接受a，并颠倒其含义。“非必需”是“可选”

您可以以“可选”方式设置所有输入的样式，然后覆盖
：required
元素的样式设置

不幸的是，对于可选的
input
元素（）

下面是#1的一个示例，当输入为/不为空时，使用JavaScript添加/删除类：


“严格使用”；
功能切换EmptyClass（el）{
如果（el.tagName==“输入”）{
//如果需要IE兼容性，则需要一个'If`/'else`；
//IE不支持'toggle'的第二个参数`
el.classList.toggle（“空”！el.value）；
}
}
document.querySelectorAll（“输入”）.forEach（toggleEmptyClass）；
document.addEventListener（“输入”，函数（）{
切换EmptyClass（事件目标）；
});
输入：非（.empty）：必需{
背景色：#FF8000；
}
输入：非（.empty）：非（：必选）{
背景色：#0080FF；
}

必修的：
必需且（最初）为空：
可选：
可选且（最初）为空：
使用以下方法找到此解决方案：


输入：显示占位符{
边框：1px实心#F5；
}
输入{
背景：#ffffff；
边界：10px固体；
边界图像切片：1；
边框宽度：1px；
边界图像源：线性梯度(
171.2deg，
#ffc1d4 15.78%，
#ff866c 76.58%
);
}
这里有一个使用javascript和css的解决方案

CSS:

JS:

何时要突出显示输入？可能当用户悬停在其上方或关注该字段时？无法使用此方法。在这种情况下，样式将始终显示，但我只在输入不为空时才需要它们。@IrinaZorg-不幸的是，空/非空
输入
元素没有CSS选择器，只有有效/无效，这（我想您已经知道）对可选输入没有帮助。为此，您需要使用JavaScript：-（@IrinaZorg你在找这个：？@IrinaZorg-我已经更新了答案，使用JavaScript切换CSS中使用的类。非常酷！！注意，
：显示的占位符在任何版本的IE中都不起作用，在Edge v44或更早版本中也不起作用（这在大多数Windows安装中仍然是最新的，尽管时间不会太长，因为基于Chromium的Edge v79于1月份推出，并逐渐添加到自动更新中）。请注意，您仍然需要
：not（：required）
或类似版本，以避免设置所需元素的样式。啊！但请参见以下注释：IE上有一个Microsoft特定的版本：
：-ms input placeholder
。因此，如果您同时使用这两个版本（在单独但等效的规则中），则IE和Edge v44及之前的版本将涵盖您。
.highlighted
      {
        border: hsl(180, 60%, 60%) 2px solid;
      }

        let inputs = document.querySelectorAll('input:optional');
        for (let input of inputs)
        {
            input.addEventListener('change',function(e)
            {
              if (this.value != '')
              {
                this.classList.add('highlighted');
              }
              else
              {
                this.classList.remove('highlighted');
              }
            });
        }