3-6失去焦点在获得焦点时怎么恢复默认样式还有tip的文字

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

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2018-01-11 18:48:20

你好,你的意思是:再次获取焦点的时候,提示文字要是“请输入您的姓名”,是这个意思么?若是,可参考如下代码:

http://img1.sycdn.imooc.com//climg/5a5740b30001a82c06190200.jpg

祝学习愉快~

好帮手慕糖 2018-01-11 17:56:22

你好,经测试,改代码已经实现效果了呀,不太明白你的需求,建议:详细描述下,便于大家能够更好的解决问题。

祝学习愉快~

  • 提问者 金沙熊飞 #1
    先是文本框获得焦点,显示tip,失去焦点时,获得样式和tip的提示:不能为空,在获得焦点时,样式能恢复默认?还有tip的提示怎么恢复
    2018-01-11 18:32:32
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
JavaScript基础入门 2018
  • 参与学习       547    人
  • 提交作业       206    份
  • 解答问题       640    个

JavaScript作为前端学习中的一个重要组成部分,本课程将带领你从最基础的语法开始,学习js的流程控制语句、函数、内置对象、DOM基础、DOM事件、BOM基础以及经典的js案例--轮播图。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师