zoukankan html css js c++ java

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

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

查看全文

相关阅读:
定时任务
 ---Ubuntu 连接手机tethering
---thunar 文件浏览器的使用！
---recovery ui 修改
 ---wordpress 升级遇到的问题！
---BD PROCHOT
---安装/修复Ubuntu/Ach Linux efi 启动！！！（包括双系统启动）
---sgdisk 分区表
 --- cache PV 丢失或损坏怎么办
 ---lvm2分区修复问题！

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