请老师帮忙来看看，不会取消提示文字和去掉加上的样式了。。。
来源：4-11 编程练习
魏源
2020-10-23 14:06:25
# 具体遇到的问题
DOM 4-11 编程练习
第三步：给输入框绑定失去焦点事件，当输入框获得焦点时，判断：
（1）如果值为空，输入框后出现提示文字“用户名不能为空”，并且将样式表中的边框样式添加给输入框
（2）如果值不为空，输入框后的提示文字消失，之前加上的样式也要去掉
第三步的（2）不会取消提示文字和去掉加上的样式，没做出来
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
尝试过的思路在代码中注释了，结果就是页面中当再次点击获得焦点是颜色就不对了，红色框被覆盖住了
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.red{
border:1px solid red;
}
</style>
</head>
<body>
姓名：<input type="text" class=""> <span></span>
<script type="text/javascript">
// 补充代码
var oIp = document.getElementsByTagName('input')[0];
oSpan = document.getElementsByTagName('span')[0];
oIp.onfocus = function(){
if(oIp = []) oSpan.innerHTML = '请输入您的姓名';
};
oIp.onblur = function(){
if(oIp = []){
oSpan.innerHTML = '用户名不能为空';
this.className='red';
}else{
//添加代码
//自己尝试过的解决思路1：
// oSpan.innerHTML = '';
// this.className='';
//自己尝试过的解决思路2：
//if(oIp.minLength >= 1) oSpan = [];
}
};
</script>
</body>
</html>
1回答
-
同学你好，需要先了解一些知识
一个等号（=）表示赋值，两个等号（==）才表示判断是否相等，所以代码中需要判断相是否等时，使用==
可以使用value属性获取输入框输入的值，值的类型是字符串，所以没有输入任何内容时，获取的值是空字符串。
具体要修改地方的可以结合代码中的注释理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .red { border: 1px solid red; } </style> </head> <body> 姓名：<input type="text" class=""> <span></span> <script type="text/javascript"> // 补充代码 var oIp = document.getElementsByTagName('input')[0]; oSpan = document.getElementsByTagName('span')[0]; oIp.onfocus = function () { // =表示赋值，判断是否相等应该使用== // if (oIp = [])oSpan.innerHTML = '请输入您的姓名'; // 判断数据框的value值是否为空字符串，而不是对输入框这个元素进行判断 if (oIp.value == "") { oSpan.innerHTML = '请输入您的姓名'; // 聚焦的时候设置类名为空，去掉红色边框 this.className = "" } }; oIp.onblur = function () { // 与前面的一样，使用==符号对输入框的value值进行判断 // if (oIp = []) { if (oIp.value == "") { oSpan.innerHTML = '用户名不能为空'; this.className = 'red'; } else { // 输入姓名之后，修改提示信息内容，并设置类名为空，去掉红色边框 oSpan.innerHTML = ""; this.className = "" //添加代码 //自己尝试过的解决思路1： // oSpan.innerHTML = ''; // this.className=''; //自己尝试过的解决思路2： //if(oIp.minLength >= 1) oSpan = []; } }; </script> </body> </html>祝学习愉快~
0
相似问题