码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-07-09 19:37:14      阅读:495      评论:0      收藏:0      [点我收藏+]

标签:

有时我们需要在点击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&nbsp;或者&nbsp;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标签里增加事件。

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

标签:

原文地址:http://www.cnblogs.com/westward/p/5656427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!