您的位置：首页 > Web前端 > JavaScript

js控制html文字提示语的出现和隐藏

2016-07-09 18:54 483 查看
有时我们需要在点击html输入框的时候，旁边会出现提示语。在输入字符的时候，输入框下边会出现输入了多少字符的提示。

请看下面实例。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<style type="text/css">
body {
background: url("img/01.jpg") no-repeat center;

}
div {
margin:0 auto;

}
</style>
</head>
<script type="text/javascript">
window.onload= function(){
var aInput ;
var aTd;
var aName;
var aMsg;
var countNum;
var count = document.getElementById("count");
aInput= document.getElementsByTagName("input");
aTd= document.getElementsByTagName("td");
aName= aInput[0];
aMsg= aTd[1];
aName.onfocus= function(){
aMsg.innerHTML= '时间格式：YYYY-MM-DD 或者 YYYYMMDD ';
}

aName.onblur= function(){
countNum= this.value.length;
if(countNum==0){
aMsg.innerHTML= '';
}
else if(countNum>10 || countNum<5){
aMsg.innerHTML= '<span style="color:red">请输入5--10个字符！</span>';
return false;
}
}

aName.onkeyup= function(){
countNum = this.value.length;
count.innerHTML= countNum +'个字符';
if(countNum==0){
count.innerHTML='';
}
}
}

</script>
<body >

<form method="post" >
<table>
<tr>
<td>
<input type="text" >
</td>
<td></td>

</tr>
<tr>
<td id="count"></td>
</tr>
</table>
</form>
</body>
</html>


实例里面的js代码，也可以在script标签里定义为多个有名字的方法。然后在input标签里增加事件。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航