正在回答 回答被采纳积分+1
4回答
好帮手慕言
2021-03-11 14:12:59
同学你好，可以参考下方的代码和注释理解：
<!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>
// 获取元素
var input = document.getElementsByTagName("input")[0];
var span = document.getElementsByTagName("span")[0];
// 绑定获取焦点事件
input.onfocus = function () {
//将失去焦点时给输入框加的样式去掉
this.className = "";
if (input.value == "") {//如果值为空，出现提示文字
span.innerHTML = "请输入您的姓名";
}
}
// 绑定失去焦点事件
input.onblur = function () {
//如果值为空，出现提示文字，输入框加上样式
if (input.value == "") {
span.innerHTML = "用户名不能为空";
this.className = "red";
}
//如果值不为空，提示文字消失，输入框没有样式
else {
this.className = "";
span.innerHTML = "";
}
}
</script>
</body>
</html>
编程题是给出任务提示的，如下：
同学不能不思考，直接来问答区提问，老师给出代码之后，对同学的思考问题的能力是没有太大帮助的，同学要尝试自己写，如果哪里实现不了，可以来问答区提问，老师根据同学写的代码给出建议，这样同学的能力才能得到提升呦。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星