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标签里增加事件。

查看全文

相关阅读:
R: 聚类分析
 R: 主成分分析 ~ PCA(Principal Component Analysis)
R: 关于 ggplot2 的初探
 R: 字符串处理包：stringr
R: 用 R 查看、管理文件(夹)
R: 关于文件文件夹的处理：file.show() dir.create().....
R: 绘图 pie & hist
R: 绘图 barplot
R: 对向量中的每个元素，检查其是否包含某个“单词”
R: 一页显示多张图的方法

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