老师帮忙看下可不可以简化
来源：3-8 编程练习
好好丶学习
2020-03-22 12:08:54
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>onblur和onfocus</title>
<style type="text/css">
.red {
border: 1px solid red;
}
</style>
</head>
<body>
姓名：<input type="text" /> <span></span>
<script type="text/javascript">
var inp = document.getElementsByTagName("input")[0];
inp.onfocus = function() {
var spa = document.getElementsByTagName("span")[0];
spa.innerHTML = "请输入您的姓名";
};
inp.onblur = function() {
var spa = document.getElementsByTagName("span")[0];
if (this.value == "") {
spa.innerHTML = "用户名不能为空";
this.className = "red";
} else {
this.style.borderColor = "grey";
spa.innerHTML = "";
}
};
</script>
</body>
</html>
1回答
-
好帮手慕糖
2020-03-22
同学你好，优化以及代码中的其他问题，回答如下：
1、span的获取，直接在事件外获取全局的即可，不需要每个事件中单独获取，例：
2、如下，输入内容之后，再删除，提示信息是对的，但是边框没有改变。这是因为直接在js中设置样式，是应用到标签中的，优先级比较高，设置的类名的优先级没有标签中的高。显示的是灰色。
建议：不需要修改边框，有内容的时候，去掉类名即可（设置类名为空），例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题