輸入框內提示信息

如何實現這樣一個功能呢?當用戶要填寫表單時,文本框內會給出提示信息,如下圖。
 
 
當用戶點擊(文本框獲得焦點)之後,如下圖:
 
 
當用戶開始輸入時,如下圖所示:
 
 
代碼供參考:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>huangwei </title>
        <script type="text/javascript">
            //onclick="alert(this.innerText)"
        function labelClick(){ 
            var username=document.getElementsByName("username")[0]; 
            var myLabel = document.getElementById("mylabel"); 
            if(username.value==""){ 
                myLabel.className="block3";//italic 
            } 
            username.focus(); 
        } 
        function TextKeyUp(){ 
            var myLabel = document.getElementById("mylabel"); 
            var username = document.getElementsByName("username")[0]; 
            if (username.value == "") { 
                myLabel.style.zIndex = 0; 
                myLabel.className="block3";//italic 
            } 
            else { 
            myLabel.style.zIndex = -2; 
            } 
        } 
        function TextKeydown(){ 
            var myLabel = document.getElementById("mylabel"); 
            myLabel.style.zIndex = -2; 
        } 
        function TextFocus(){ 
            var myLabel = document.getElementById("mylabel"); 
            var username = document.getElementsByName("username")[0]; 
            if(username.value==""){ 
                myLabel.style.zIndex = 0; 
                myLabel.className="block3";//italic 
            }else{ 
                myLabel.style.zIndex = -2; 
            } 
        } 
        function TextBlur(){ 
            var myLabel = document.getElementById("mylabel"); 
            var username = document.getElementsByName("username")[0]; 
            if(username.value==""){ 
                myLabel.style.zIndex = 0; 
                myLabel.className="block2"; 
            } 
        } 
        </script>
        <style type="text/css">
            .block1{ 
                width:50xp; 
                height:20px; 
                padding:10px; 
                margin:5px; 
                background-color:#ffffff; 
                                position:absolute; 
                left:15px; 
                top:30px; 
                z-index:-1; 
         
            } 
            .block2{ 
                width:50xp; 
                height:16px; 
                padding:10px; 
                margin:5px; 
                background-color:#ffffff; 
                                position:absolute; 
                left:20px; 
                top:32px; 
                font-weight:bolder; 
                color:#ACA899; 
                font-style:normal; 
                z-index:0; 
     
            } 
            .block3{ 
                width:50xp; 
                height:16px; 
                padding:10px; 
                margin:5px; 
                background-color:#ffffff; 
                                position:absolute; 
                left:20px; 
                top:32px; 
                color:#7e7e7e; 
                font-style:italic; 
                z-index:0; 
            }                
                     
        </style>
    </head>
    <body>
        <input type="text" name="username" class="block1" onkeyup="TextKeyUp();" onkeydown="TextKeydown();" onfocus="TextFocus();" onblur="TextBlur();" />
        <label id="mylabel" class="block2" onclick="labelClick()" />
            請輸入用戶名 
        </label>
    </body>
</html>

作者“whuang”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *