js验证非空后，输入框边框变红，如果输入正确怎么让边框恢复到默认的颜色？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js验证非空后，输入框边框变红，如果输入正确怎么让边框恢复到默认的颜色？相关的知识，希望对你有一定的参考价值。
验证与恢复函数我会写，就是不知道输入框默认的是什么样式，
function restore(a)
a.style.border="1px solid black";
默认的样式不是黑色也不是白色，到底该怎么恢复到原来的样子？
下面那条线不是，上面那个输入框就是输入标签的默认的样式
默认的边框样式应该是无法恢复的，不同浏览器的边框也不一样。
不过你可以在文本框外面加一个span，只改变span的边框（需要调整一下padding），这样就可以恢复了：
<html><head>
<script type="text/javascript">
var t = 0;
function showBorder()
var answer3 = document.getElementById("yearId").value;
if (t == 0)
t = 1;
document.getElementById("yearId").parentElement.style.border = "0";
else
t = 0;
document.getElementById("yearId").parentElement.style.border = "1px solid black";
</script>
</head>
<body>
<span style="padding-bottom: 2px; padding-top: 1px; padding-left: 0; padding-right: 0">
<input type="text" id="yearId" name="yearId" size="16" /></span>
<input type="button" value="show border" onclick="showBorder()" />
</body>
</html>
效果图：
前端js实践——输入框内容的显示和隐藏
主要内容：Javascrip中事件处理的方法，DOM中的常见对象及其属性、方法；
题目描述：显示和隐藏输入框中的提示内容，具体表现如下图：
1.输入框获得焦点，提示内容消失，边框变色
2.输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色
代码：<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<meta name = "viewport" content="width = device-width = device-width,initial-scale = 1.0">
<meta http-equiv = "X-UA-compatible" content="ie = edge">
<title>Document</title>
<style>input{
color: #999}</style> //改变输入框字体颜色
</head>
<body>
<input type = "text"value = "邮箱/ID/手机号"> //框内文本
<script>
//文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。 如果找不到匹配项，则返回null。
var text = document.querySelector("input");
text.onfocus = function(){
if(this.value === "邮箱/ID/手机号") //获得焦点
{
this.value = \'\';
}
}
text.onblur = function(){ //失去焦点
if(this.value === \'\' )
{
this.value = "邮箱/ID/手机号";
}
}
</script>
</body>
<ml>
以上是关于js验证非空后，输入框边框变红，如果输入正确怎么让边框恢复到默认的颜色？的主要内容，如果未能解决你的问题，请参考以下文章