How to dynamically display the tips or help on the text box

来源:互联网 发布:苹果手机mac地址 编辑:程序博客网 时间:2024/06/05 00:38

<!--html file-->


<html>
    <head>
        <title>
            test Dynamic Content
        </title>

<!--if you want to copy my code, please change here for your personal js file-->
        <script src="test.js" type="text/javascript">

        </script>
    </head>
    <body>
        <form action="">
            <p style="font-weight:bold;">
                <span style=" font-style:italic">
                    Customer Information
                </span>
                <br /><br />
                <label>
                    Name:
                    <input type="text" onmouseover="message(0)" onmouseout="message(4)" />
                </label>
                <br /><br />
                <span style="font-style:italic">
                    To create an account, provide the following:
                </span>
                <br /><br />
                <label>
                    UserID:
                    <input type="text" onmouseover="message(2)" onmouseout="message(4)" />
                </label>
                <label>
                    Password:
                    <input type="text" onmouseover="message(3)" onmouseout="message(4)" />
                </label>
                <br />
                <textarea id="adviceBox" rows="3" cols="50"
                          style="position:absolute; left:20px; top:0;">
                    This box provides on filling out the form on this page. Put the mouse cursor over any 
                    input field to get advice.          
                </textarea>
                <br /><br />
                <input type="submit" value="Submit" />
                <input type="reset" value="Reset" />
            </p>
        </form>
    </body>
</html>


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var helpers = ["your name must be in the form: \n \
               first name, middle name, last name",
               "your email address must have the form:\
               user@domain",
               "Your userId must have at least six characters",
               "Your password must have at least six characters\
               and it must include one digit",
               "This box provides advice on filling out\
               the form on this page. Put the mouse cursor over any\
               input field to get advice"];




function message(adviceNumber) {

     //here we can change this function for displaying in different text area;
    document.getElementById("adviceBox").value = helpers[adviceNumber];
}



//The most important thing is to remember how to create js array, if you know how to use this, it will be not a problem for you to understand this code.

原创粉丝点击