JavaScript Web Effects-text input box and Pull-down menu effects

instance One: Make the text box underlined only

<script type= "Text/javascript" >                     
    function Changetextstyle () {             //Make text box underlined
        //Get the text box Dom
        var MyText = document.getElementById ("MyText");                      
        MyText.style.borderColor = ' black ';     Set border color
        MyText.style.borderStyle = ' solid ';     Set border style to solid line
        myText.style.borderWidth = ' 0 0 1px 0 ';//set border size, 0 represents no
    }
</script>

Example two: initials or all uppercase letters

<script type= "Text/javascript" >//format validation function Validatein
                Put () {//Get the DOM var myText1 = document.getElementById ("MyText1") of the text box;
                var myText2 = document.getElementById ("MyText2");           var val1 = Mytext1.value;           Value of text box 1 var val2 = Mytext2.value;                    Value of text box 2 var errmsg = '; Defines error prompt characters//determines whether to start with an uppercase letter if (Val1!= ' && (Val1.charat (0) > ' Z ' | | Val1.charat (0)
                    < ' A ') {//stitching error character errmsg = ' First Letter of text box 1 requires uppercase \ n ';
                alert (errmsg); } if (Val2!= ' &&!/\b[a-z]+\b/.test (val2)) {//Stitching error character err
                    MSG = ' text box 2 needs all uppercase letters \ n ';
                alert (errmsg); } {</script> 

example Three: A text box that can only enter numbers

<script type= "Text/javascript" >         
            //Format checksum
            function ValidateInput () {
                //Get the DOM var myText of the text box
                = document.getElementById ("MyText");
                var val = mytext.value;         Gets the user-entered value
                if (!/\b[0-9]+\b/.test (val)) {        //Use regular checksum
                    alert (' only enter Number ');            Prompt error message
                }
</script>

Example four: Validating an email format with regular Expressions

<script type= "Text/javascript" >         
            //Format checksum
            function ValidateInput () {
                //Get the DOM var myText of the text box
                = document.getElementById ("MyText");
                var email = mytext.value;   Get user Input Email
                //define Regular expression
                var emailreg 
                    =/^ ([a-za-z0-9_-]) +@ ([a-za-z0-9_-]) + ((\.[ a-za-z0-9_-]{2,3}) {1,2}) $/;
                if (emailreg.test (email)) {   //To determine if the format required
                    alert ("Calibration pass, allow submission");     Through
                }else{
                    alert ("Checksum fails, please check reenter");  Authentication failed
                }
            }
</script>

instance five: Clear text box contents when focus

<script type= "Text/javascript" >         
            //clear content
            function ClearContent (myText) {
                mytext.value = ';      Set the value of the text content to the null character
            }
</script>


<input type= "text" value= "onfocus=" clearcontent (this)/>

example six: Immediately after the user entered the format check

<script type= "Text/javascript" >                     
    function Validatetel () {             //format checksum/
        /Get the text box dom
        var Mytel = document.getElementById ("Mytel");
        var val = mytel.value;          Gets the user-entered value
        if (!/\b[0-9]+\b/.test (val)) {            //Use regular checksum
            alert (' only enter Number ');            Prompt for error messages
            //modify styles, causing attention
            MyTel.style.border = ' 1px solid red ';
        } else if (Val.length!=) {         //length must be 11-bit
            alert (' Mobile number is 11-bit ');      Prompt for error messages
            //modify styles, causing attention
            MyTel.style.border = ' 1px solid red ';
        } else{
            //modified style, indicated through the
            MyTel.style.border = ' 1px solid green ';
            return true;
        }
</script>


<input type= "text" value= "id=" Mytel "onblur=" Validatetel () "/>

example Seven: linkage of the provinces and cities pull-down menu

The onchange event occurs when the contents of the domain change.

<script type= "Text/javascript" > var arr = new Array ();
            Data array//definition data, structure: ID, name, parent ID Arr[arr.length] = [1, ' Beijing ', NULL];
            Arr[arr.length] = [2, ' Sichuan Province ', null];
            Arr[arr.length] = [3, ' Guangdong province ', null];
            Arr[arr.length] = [4, ' Beijing ', 1];
            Arr[arr.length] = [5, ' Chengdu City ', 2];
            Arr[arr.length] = [6, ' Guangzhou ', 3];
            Arr[arr.length] = [7, ' Shenzhen ', 3]; Dynamic Settings Drop-down Item function filloptions (type) {if (type = = ' province ') {//Get the Province dropdown menu
                    DOM var province = document.getElementById ("province");        province.innerhtml = ';
                    Content first empty//fill the province character var prostr = ' <option value= ' "></option> ';      Traversal array for (var i=0; i<arr.length; i++) {var item = Arr[i]; Current item//If notParent ID, then the province if (item[2] = = null) Prostr + = ' <option value= ' +item[0]+ ' &G t; '
                    +item[1]+ ' </option> '; } province.innerhtml = prostr;//fills new content}else if (type = = ' city ') {//
                    Gets the id var currproid = document.getElementById ("province") of the current province. Value;
                    if (currproid = = ") return false;
                    Get the City pull-down menu dom var town = document.getElementById ("Cities");            city.innerhtml = ';
                    Content first empty//fill city characters var citystr = ' <option value= ' "></option> ';      Traversal array for (var i=0; i<arr.length; i++) {var item = Arr[i];
                            Current item//Judge whether the current saved city if (item[2] = = currproid) Citystr = ' <optiOn value= ' +item[0]+ ' > ' +item[1]+ ' </option> '; } city.innerhtml = citystr//Fill new content}} </script> &L T;body style= "Text-align:center onload=" filloptions (' province '); " > <!--definition pull-down menu--> province: <select id= "Province" onchange= "Filloptions" (' City ') ></select>&lt ;br/><br/>: <select id= "City" ></select><br/><br/> </body>

instance 8:3-level linkage of the provincial and municipal counties drop-down Menu

<script type= "Text/javascript" > var arr = new Array ();
            Data array//definition data, structure: ID, name, parent ID Arr[arr.length] = [1, ' Beijing ', NULL];
            Arr[arr.length] = [2, ' Sichuan Province ', null];
            Arr[arr.length] = [3, ' Guangdong province ', null];
            Arr[arr.length] = [4, ' Beijing ', 1];
            Arr[arr.length] = [5, ' Chengdu City ', 2];
            Arr[arr.length] = [6, ' Guangzhou ', 3];
            Arr[arr.length] = [7, ' Shenzhen ', 3];
            Arr[arr.length] = [8, ' Wuhou ', 5];
            Arr[arr.length] = [9, ' Qingyang District ', 5];
            Arr[arr.length] = [10, ' Baiyun District ', 6];
            Arr[arr.length] = [11, ' increased city ', 6];
            Arr[arr.length] = [12, ' Conghua ', 6]; Dynamic Settings Drop-down Item function filloptions (type) {if (type = = ' province ') {//Get the Province dropdown menu
                    DOM var province = document.getElementById ("province");        province.innerhtml = ';
              Content first empty//fill in province characters      var prostr = ' <option value= ' "></option>";          for (var i=0; i<arr.length; i++) {//traversal array var item = Arr[i]; The current item//If there is no parent ID, is the province if (item[2] = = null) proSt
                    R + + ' <option value= ' +item[0]+ ' > ' +item[1]+ ' </option> ';    } province.innerhtml = Prostr; Fill new Content}else if (type = = ' city ') {//Get the current province id var currproid = doc
                    Ument.getelementbyid ("Province"). Value;
                    if (currproid = = ") return false;
                    Get the City pull-down menu dom var town = document.getElementById ("Cities");            city.innerhtml = ';                 
                   Content first empty//fill city characters var citystr = ' <option value= ' "></option> '; for (var i=0; i<arr.length; i++) {//traversal array var item = Arr[i];
                            Current item//Judge whether the current saved city if (item[2] = = currproid)
                    Citystr + = ' <option value= ' +item[0]+ ' > ' +item[1]+ ' </option> ';
                    } city.innerhtml = citystr//Fill new content}else if (type = = ' Area ') {
                    Gets the id var Currcityid = document.getElementById ("city") of the current town. Value;
                    if (Currcityid = = ") return false;
                    Get the DOM var area of the county pull-down menu = document.getElementById ("area");            area.innerhtml = ';                 
                    Content first empty//populated county characters var areastr = ' <option value= ' "></option> ';    for (var i=0; i<arr.length; i++) {//traversal array var item = Arr[i];      Current item//Judge whether it is the county of the current city if (item[2] = = Currcityid)
                    Areastr + = ' <option value= ' +item[0]+ ' > ' +item[1]+ ' </option> ';   } area.innerhtml = Areastr; Populate new Content}} </script> <body style= "Text-align:center onload=" filloptions (' Provinc E '); " > <!--definition pull-down menu--> province: <select id= "Province" onchange= "Filloptions" (' City ') ></select>&lt ;br/><br/> City: <select id= "urban" onchange= "filloptions (' area ')" ></select><br/><br/&gt
        ; County/District: <select id= "area" ></select><br/><br/> </body>

Instance nine: A text box border flashes when you enter text

Onfocus () and onblur () are best written in pairs.

<script type= "Text/javascript" >//initialization functions function init () {//Get all text dom
        var texts = document.getelementsbytagname (' input ');
            Iterate through all the text boxes for (Var i=0;i<texts.length;i++) {var t = texts[i];//current text box var timer;
                Listener Focus Event T.onfocus = function () {var e = this;//Keep reference to current DOM//start flashing timer Timer = setinterval (function () {//Get current border color variable var c = E.style.border
                    Color;
                        if (c = = ' yellow ') {//if the yellow e.style.bordercolor = ';//restore primary color}else{//Otherwise, the border turns yellow
                    E.style.bordercolor = ' yellow ';
            },1000);//flashing every 1 seconds};
                T.onblur = function () {//Monitor departure Event//restore border color t.style.bordercolor = ';
       Clearinterval (timer);//Clear Timer} } </script> <body style= "text-align:center;" onload= "Init ();" >