3-6失去焦点在获得焦点时怎么恢复默认样式还有tip的文字
<head>
<meta charset="UTF-8">
<title>onfoucs和onblur练习</title>
<style type="text/css">
.box{
padding:50px;
}
.left,.tip{
float:left;
}
.left {
margin-right:10px;
}
.tip{
display:none;font-size:14px;
}
.border{
border:1px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取文本框和提示框
var user = document.getElementById("user");
var tip = document.getElementById("tip");
//获得焦点
user.onfocus=function(){
//让tip显示出来
if(this.value==""){
tip.style.display="block";
this.innerHTML="请输入您的姓名";
}
this.className=" ";
}
user.onblur=function(){
var userVal = this.value;
if(this.value=="" && isNaN(user)==true){
tip.innerHTML="姓名不能为空"
this.setAttribute("class","border");
}else{
this.className=" ";
tip.innerHTML="OK";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="user" placeholder="请输入您的姓名">
</div>
<div class="tip" id="tip">
请输入您的姓名
</div>
</div>
</body>
正在回答 回答被采纳积分+1
- 参与学习 547 人
- 提交作业 206 份
- 解答问题 640 个
JavaScript作为前端学习中的一个重要组成部分,本课程将带领你从最基础的语法开始,学习js的流程控制语句、函数、内置对象、DOM基础、DOM事件、BOM基础以及经典的js案例--轮播图。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星