老师，这个效果实现不了，麻烦帮忙看下问题在哪里
来源：4-11 编程练习
html小小白
2022-02-10 16:09:11
<!DOCTYPE html>
<html>
<head>
<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 input = document.getElementsByTagName('input')[0];
var span = document.getElementsByTagName('span')[0];
input.onfocus = function () {
if (input.value.length==0) {
span.innerHTML='请输入您的姓名';
}
};
input.onblur=function() {
if (input.value.length==0) {
span.innerHTML='用户名不能为空';
this.className='red';
}else {
span.innerHTML='';
this.className='blank';
}
};
</script>
</body>
</html>
1回答
-
好帮手慕久久
2022-02-10
同学你好，代码可以实现效果：
需要注意的是，先不输入内容然后失去焦点，再获取焦点时，input的边框会叠加红色（页面放大可以看得清楚些）：
这是因为之前设置的红色边框没有去掉。
建议在获取焦点事件中，手动将之前可能存在的红色边框去掉：
祝学习愉快！
0
相似问题