请老师帮忙检查！

<!DOCTYPE html>

<html>

<head>

<title>onblur和onfocus</title>

.red{

border:1px solid red;

}

</style>

</head>

<body>

姓名：<input id="ipt" type="text"> <span id="sp"></span>

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>

QiuBaa 2019-10-12

源自：JS DOM事件 3-8 编程练习

收起

3回答

好帮手慕言 2019-10-12 18:41:12

同学你好，根据效果图来讲，当输入框失去焦点时，如果输入了内容，提示文字再消失哦。

建议：去掉onkeydown事件。

如果帮助到了你，欢迎采纳~祝学习愉快~

收起回答

提问者 QiuBaa 2019-10-12 17:24:07

<!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>

收起回答

好帮手慕言 2019-10-12 15:07:10

同学你好，测试同学提供的代码，有以下问题

1、在谷歌浏览器下测试，聚焦没有输入内容，失去焦点后再次聚焦，输入框红色和蓝色重合了，如图：

建议：聚焦时清除类名

2、聚焦时当输入框里面有内容时，还是出现了提示“请输入您的姓名”。（正常是不显示提示的）

建议：聚焦时判断输入框是否有内容。

代码参考：

祝学习愉快~

收起回答

提问者 QiuBaa #1

<!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"); 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>

2019-10-12 17:19:38
提问者 QiuBaa #2

不好意思代码有误，我重新发在新的回答里面了，麻烦老师帮我检查下哦！

2019-10-12 17:23:53