请老师检查并订正
来源：4-11 编程练习
临溪倚山靠
2022-03-03 15:11:46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" id="myinput" value=""> <span id="myspan"></span>
<script type="text/javascript">
// 得到输入框对象以及放置提示文字的元素对象
var oInput = document.getElementById('myinput');
var oSpan = document.getElementById('myspan');
// 当输入框获得焦点：如果输入框值为空，提示“请输入您的姓名”
oInput.onfocus = function(){
if(oInput.value == ''){
oSpan.innerText = '请输入您的姓名';
}
}
// 当输入框失去焦点：如果输入框值为空，提示“用户名不能为空”
// 并且边框颜色变为红色如果输入框值不为空，那么没有提示文字，边框颜色是默认颜色
oInput.onblur = function(){
if(oInput.value == ''){
this.className="red";
oSpan.innerText = '用户名不能为空';
} else{
this.className="";
oSpan.innerText = '';
}
}
</script>
</body>
</html>
1回答
-
好帮手慕久久
2022-03-03
同学你好，有个小问题可以优化一下：
先不输入内容并失去焦点，然后再获取焦点，此时input框会叠加一层红色边框：
建议获取焦点时，把可能存在的红色边框去掉：
祝学习愉快！
0
相似问题