Example : Text Box codes in JS To Show/Hide Asterisk/Star Symbol When Text Box is Blank/Filled.
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Codershelpline</title>        
		<script>
			function starhide()
			{
			   document.getElementById("lbl2").style.display = 'none';
			}	
			function starshow()
			{
			  document.getElementById("lbl2").style.display = 'inline'; 
			}
		</script>
    </head>
    
    <body>    	
    	<form name="form1">
            <div>
                <label>Name</label>
                	<label style="color: red" hidden="">*</label>
                	<label style="color: red" hidden="" id="lbl2">**</label>
                <label>:</label>
                <label><input type="text" name="input1"></label>                                
            </div>
                <input type="button" onClick="starhide()" value="Hide">
                <input type="button" onClick="starshow()" value="Show">
	</form>
    </body>
</html>
Example : Text Box codes in JS to move the cursor to the next HTML element on pressing the Enter key/button from keyboard [Enter Key Event].
<!DOCTYPE html> 
<html> 
    <head>         
        <script>
            function enter1()
            {
                var x = event.keyCode || event.which;
                if (x === 13)
                {
                    event.preventDefault();
                    document.form1.u_id.focus();
                }
            }

            function enter2()
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.psd.focus();
                }
            }

            function enter3() 
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.dob.focus();
                }
            }

            function enter4() 
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.gender1.focus();
                }
            }

            function enter5() 
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.gender2.focus();
                }
            }

            function enter6()
            {
                var x = event.keyCode || event.which;
                if (x === 13)
                {
                    event.preventDefault();
                    document.form1.gender3.focus();
                }
            }

            function enter7() 
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.mcode.focus();
                }
            }

            function enter8()
            {
                var x = event.keyCode || event.which;
                if (x === 13)
                {
                    event.preventDefault();
                    document.form1.mob.focus();
                }
            }

            function enter9() 
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.email.focus();
                }
            }

            function enter10()
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.matric.focus();
                }
            }

            function enter11() 
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.add.focus();
                }
            }

            function enter12() 
            {
                var x = event.keyCode || event.which;
                if (x === 13)
                {
                    event.preventDefault();
                    document.form1.pin.focus();
                }
            }

            function enter13() 
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.state.focus();
                }
            }

            function enter14() 
            {
                var x = event.keyCode || event.which;
                if (x === 13) 
                {
                    event.preventDefault();
                    document.form1.sub6.focus();
                }
            }

        </script>
    </head>
 
    <body> 
        <form name="form1" method="post" action="#"> 
            <center>
                <fieldset style="width: 60%; background-color: aliceblue;border-radius: 8px; border- 
                           width: 4px; border-color: cadetblue"> 
                    <table style="font-weight: bold; font-family: cambria"> <h1>User 
                           Registration</h1> <hr style="width: 95%"> 
                        <tr> 
                            <td>Sl. No.</td> 
                            <td>:</td> 
                            <td> 
                                <input type="text" name="sl_no" id="sl_no1" onkeypress="enter1()" 
                                    autofocus=""> 
                            </td> 
                        </tr> 

                        <tr> 
                            <td>User Name</td> 
                            <td>:</td> <td> 
                                <input type="text" name="u_id" id="u_id1" onkeypress="enter2()" 
                                    placeholder="Enter User ID"> 
                            </td> 
                        </tr> 

                        <tr> 
                            <td>Password</td> 
                            <td>:</td> 
                            <td> 
                                <input type="password" name="psd" id="psd1" onkeypress="enter3()" 
                                     placeholder="Enter Password"> 
                            </td> 
                        </tr>
 
                        <tr> 
                            <td>Date of Birth</td> 
                            <td>:</td> 
                            <td> 
                                <input type="date" name="dob" id="dob1" onkeypress="enter4()"> 
                            </td> 
                        </tr>
 
                        <tr>
                            <td>Gender</td> 
                            <td>: </td> 
                            <td> 
                                <input type="radio" name="gender" id="gender1" onkeypress="enter5()" 
                                      value="Male" >Male 
                                <input type="radio" name="gender" id="gender2" onkeypress="enter6()" 
                                      value="Female" >Female
                            </td> 
                        </tr> 

                        <tr> 
                            <td>Mobile No. </td> 
                            <td>:</td> 
                            <td> 
                                <select onkeypress="enter8()" name="mcode" id="mcode1"> 
                                    <option value="+91">+91</option> <option value="+92">+92</option> 
                                    <option value="+93">+93</option> <option value="+94">+94</option> 
                                </select> 
                                <input type="number" name="mob" id="mob1" onkeypress="enter9()" 
                                     placeholder="Enter 10 digit No."> 
                            </td> 
                        </tr>
 
                        <tr> 
                            <td>E-mail</td> 
                            <td>:</td> 
                            <td> 
                                <input type="Email" name="email" id="email1" onkeypress="enter10()" 
                                     placeholder="[email protected]"> 
                            </td> 
                        </tr>

                        <tr> 
                            <td>Qualification</td> 
                            <td>:</td>
                            <td> 
                                <input type="checkbox" name="matric" id="check1" 
                                      onkeypress="enter11()" value="Matric" >Matric 
                            </td> 
                        </tr> 

                        <tr> 
                            <td>Address</td>
                            <td>:</td>
                            <td> 
                                <textarea style="width: 200px; text-transform:capitalize" 
                                      onkeypress="enter12()" name="add" id="add1"> 
                                </textarea> 
                            </td>
                        </tr>

                        <tr> 
                            <td>Pin No.</td> 
                            <td>:</td> 
                            <td> 
                                <input type="number" name="pin" id="pin1" onkeypress="enter13()" 
                                       placeholder="Enter 6 Digit pin"> 
                            </td> 
                        </tr>
 
                        <tr> 
                            <td>State</td> 
                            <td>:</td> 
                            <td> 
                                <select name="state" id="state1" onkeypress="enter14()"> 
                                    <option value="--Select--">--Select--</option>
                                    <option value="Bihar">Bihar</option> 
                                    <option value="Delhi">Delhi</option> 
                                </select>
                            </td> 
                        </tr> 

                        <tr>
                            <td></td> 
                            <td></td> 
                            <td> 
                                <input type="submit" onclick="astrick()" name="sub"id="sub6" 
                                     value="Submit">  
                                <input type="reset" value="Reset">  
                            </td> 
                        </tr>
 
                    </table> 
                </fieldset>
            </center>
        </form> 
    </body> 
</html>
Example : How to make a text box empty/blank in an html page on putting cursor in this box. 
<!DOCTYPE html>
   <html>
      <body>
         <input type="text" onfocus=" this.value='' " value="Write your contents here">
      </body>
   </html>

--------------------------------  OR  -------------------------------

<!DOCTYPE html>
   <html>
      <body>
          <input type="text" value="India" onfocus="if(this.value==='India')this.value='';">               
      </body>
   </html>
Example : Text Box codes in JS to make a single text box empty/blank in an HTML page on clicking a button. 
<!DOCTYPE html>
   <html>
      <body>         
         <input type="text" value="India" id="txtid">
         <input type="button" value="Cancel" onclick="document.getElementById('txtid').value = '' ">
      </body>
   </html>
Example : How to make a text box empty/blank in an HTML page by clicking the same text box . 
<!DOCTYPE html>
   <html>
      <body>
           <input type="text" value="India" onclick="(this.value='')">
      </body>
   </html>
Example : How to assign a default value in a text box of html page on loading the page using JavaScript. 
<!DOCTYPE html>
   <html>
      <body>
         <input type="text" value="India">
      </body>
   </html>

NB: Above code is through html method.

---------------------------------  OR  -----------------------------------
<!DOCTYPE html>
<html>
    <head>       
        <script>
            function Default1()
            {
                document.getElementById("TxtSname2").value="India";
            }
        </script>
    </head>

    <body onload="Default1()">
        <form name="form1" id="form2" action="#" method="post">
	 <center>
	    <fieldset style="width: 600px">				
		<legend>Create New Student Account</legend>
		   <table name="tab1" id="tab2">
		     <tr>
			  <td>Student Name</td>
			  <td>:</td>
                          <td><input type="text" name="TxtSname1" id="TxtSname2"  ></td>
			</tr>
		   </table>
	    </fieldset>
          </center>
       </form>
    </body>
 </html>

Loading


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.