麻烦老师查看作业，谢谢。
来源：4-11 编程练习
DanielDu87
2022-07-22 22:46:15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style>
.red {
border: 2px solid red;
}
label {
position: relative;
}
span {
display: inline-block;
position: absolute;
width: 121px;
left: 86px;
color: grey;
}
</style>
</head>
<body>
<label>
姓名：<input type="text"><span></span>
</label>
<script type="text/javascript">
// 补充代码
input_tag = document.querySelector("input");
span_tag = document.querySelector("span");
var cnt = input_tag.value;
input_tag.onfocus = function () {
if (cnt === "") {
span_tag.innerHTML = "请输入您的姓名";
}
};
input_tag.onblur = function () {
if (cnt === "") {
span_tag.innerHTML = "用户名不能为空";
input_tag.className = "red";
}
};
</script>
</body>
</html>写回答
1回答
-
好帮手慕星星
2022-07-23
同学你好，代码问题如下：
1、span位置需要调整
input和span默认显示在一行，不需要用定位。添加左间距就好
2、输入框内容提前获取只会执行一次，永远是空字符串。在if条件中获取实时的即可，另外失焦事件中缺少有内容的设置，参考：
祝学习愉快！
0
相似问题