js控制html文字提示語的出現和隱藏

本文轉載自查看原文 2016-07-09 18:54 3975 js

有時我們需要在點擊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標簽里增加事件。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS控制HTML元素的顯示和隱藏 JS控制HTML元素的顯示和隱藏 js 瀏覽器的各種彈出框提示語 JS控制元素的顯示和隱藏原生js控制控制--彈窗的顯示和隱藏 js實現隱藏和顯示html html5配合css3實現帶提示文字的輸入框(擺脫js) JS控制元素可見（顯示）與不可見（隱藏）讓指定JS出現智能提示 HTML div鼠標懸停控制控件顯示與隱藏