临时更改输入框样式答案

【问题标题】：Change input box style temporarly临时更改输入框样式
【发布时间】：2019-12-19 13:05:08
【问题描述】：

当出现错误（例如错误的电子邮件、错误的密码等）时，我需要在红色边框中标记输入文本框如果我这样做：

document.getElementById("loginFormEmail").style.borderColor = "red"

之后它保持红色，它永久改变了样式，我需要它变回原来的颜色。

【问题讨论】：

您需要对清除错误的事件做出反应，或者检查清除的错误并在 Javascript 中重新设置。
您应该通过获取旧值来保存旧值，并在您想要返回更改时将其设置为旧颜色
这能回答你的问题吗？ Changing Border Color When Incorrect Input With Javascript

标签： javascript html css

【解决方案1】：

在 HTML5 中，您有一个功能可以让您进行表单验证

如果您的输入在表单内，您可以使用输入属性（如模式或类型）来使浏览器在客户端验证输入内容。

邮件地址示例

<input type="email" id="email" pattern=".+@yourdomain.com" required>

如果你想要一个特定模式的输入

<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

它将验证输入并添加有效和无效的 css 伪类，让您的代码更时尚

input:invalid {
  border: 1px solid red;
}

【讨论】：

【解决方案2】：

您应该在事件开始后将输入边框设为红色。
你可以这样做：

if(error){  // your error checks
   document.getElementById("loginFormEmail").className += " error";
} else{
   document.getElementById("loginFormEmail").classList.remove("error");
}

然后在你的CSS:

.error{
   border-color: red;
}

这会将错误类添加到添加红色边框的输入中，当不再有错误时，它将删除也删除红色边框的类。

【讨论】：

【解决方案3】：

您应该为元素添加一个事件监听器“更改”，然后将颜色还原。

现在，你可以这样做：

const elem = document.getElementById("loginFormEmail");
const oldColor =elem.style.borderColor; // remember old color
elem.style.borderColor = "red";
elem.addEventListener("change", ()=>{
  elem.style.borderColor = oldColor; // revert to the old color
});

但我强烈建议您在 CSS 中创建一个“红色”类，并附加/删除它，而不是在 JS 中设置颜色。

【讨论】：