请老师帮忙检查！
来源：3-8 编程练习
QiuBaa
2019-10-12 14:44:30
<!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 id="ipt" type="text"> <span id="sp"></span>
<script type="text/javascript">
var ipt=document.getElementById("ipt"),
sp=document.getElementById("sp");
ipt.onfocus=function(){
sp.innerHTML="请输入您的姓名";
};
ipt.onblur=function(){
var val=ipt.value;
console.log(val)
if(val==""){
sp.innerHTML="用户名不能为空";
ipt.className="red";
}else{
sp.innerHTML="";
ipt.removeAttribute("class");
}
}
</script>
</body>
</html>
3回答
-
好帮手慕言
2019-10-12
同学你好，根据效果图来讲，当输入框失去焦点时，如果输入了内容，提示文字再消失哦。
建议：去掉onkeydown事件。
如果帮助到了你，欢迎采纳~祝学习愉快~
0 -
QiuBaa
提问者
2019-10-12
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css"> .red {
border: 1px solid red;
}
input {
outline: none;
} </style>
</head>
<body> 姓名：<input id="ipt" type="text"> <span id="sp"></span>
<script type="text/javascript"> var ipt = document.getElementById("ipt"), sp = document.getElementById("sp");
ipt.onfocus = function () {
ipt.removeAttribute("class");
var len = ipt.value.length;
if(len==0){
sp.innerHTML = "请输入您的姓名";
}
ipt.onkeydown = function () {
var len = ipt.value.length;
if (len == 0) {
sp.innerHTML = "请输入您的姓名";
} else {
sp.innerHTML = "";
}
}
};
ipt.onblur = function () {
var val = ipt.value;
console.log(val);
if (val == "") {
sp.innerHTML = "用户名不能为空";
ipt.className = "red";
} else {
sp.innerHTML = "";
ipt.removeAttribute("class");
}
} </script>
</body>
</html>0 -
好帮手慕言
2019-10-12
同学你好，测试同学提供的代码，有以下问题
1、在谷歌浏览器下测试，聚焦没有输入内容，失去焦点后再次聚焦， 输入框红色和蓝色重合了，如图：
建议：聚焦时清除类名
2、聚焦时当输入框里面有内容时，还是出现了提示“请输入您的姓名”。（正常是不显示提示的）
建议：聚焦时判断输入框是否有内容。
代码参考：
祝学习愉快~
0h019-10-12
相似问题