10 Aralık 2015 Perşembe

Automatically Move Cursor to Next Field When TextBox is Full

  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <title>JavaScript to automatically move from one field to another field</title>  
  5.         <script type="text/javascript">  
  6. function movetoNext(current, nextFieldID) {  
  7. if (current.value.length >= current.maxLength) {  
  8. document.getElementById(nextFieldID).focus();  
  9. }  
  10. }  
  11. </script>  
  12.     </head>  
  13.     <body>  
  14.         <b>Enter your Text:</b>  
  15.         <input type="text" id="first" size="4" onkeyup="movetoNext(this, 'second')" maxlength="3" />  
  16.         <input type="text" id="second" size="4" onkeyup="movetoNext(this, 'third')" maxlength="3" />  
  17.         <input type="text" id="third" size="5" maxlength="4" />  
  18.     </body>  
  19. </html> 
Gönderen zaman: Hiç yorum yok:

Phone No (xxx-xxx-xxxx ) Validation in JQuery

  1. < script type = "text/javascript" >  
  2. //==================================  
  3. // xxx-xxx-xxxx Phnoe No Validation  
  4. //==================================  
  5. jQuery(document).ready(function() {  
  6.     $("#phone").keydown(function(e) {  
  7.         // Allow: backspace, delete, tab, escape, enter and .  
  8.         if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||  
  9.         // Allow: Ctrl+A  
  10.         (e.keyCode == 65 && e.ctrlKey === true) ||  
  11.         // Allow: home, end, left, right, down, up  
  12.         (e.keyCode >= 35 && e.keyCode <= 40)) {  
  13.             // let it happen, don't do anything  
  14.             return;  
  15.         }  
  16.         // Ensure that it is a number and stop the keypress  
  17.         if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {  
  18.             e.preventDefault();  
  19.         }  
  20.         var curchr = this.value.length;  
  21.         var curval = $(this).val();  
  22.         if (curchr == 3) {  
  23.             $("#phone").val(curval + "-");  
  24.         } else if (curchr == 7) {  
  25.             $("#phone").val(curval + "-");  
  26.         }  
  27.     });  
  28. }); < /script>  
Gönderen zaman: Hiç yorum yok:

Auto-Complete Input in HTML

  1. <input id="Input1" autocomplete="off" list="ListCountry" type="text" />  
  2. <datalist id="ListCountry">  
  3.     <option value='India'> </option>  
  4.     <option value='US'> </option>  
  5.     <option value='China'> </option>  
  6. </datalist> 
Gönderen zaman: Hiç yorum yok:

Convert JSON Data into HTML


  1. <div class="container">    
  2.     <p>    
  3.         <table id="placar" class="table table-condensed  table-bordered">    
  4.             <thead>    
  5.                 <tr>    
  6.                     <th>#</th>    
  7.                     <th>Name</th>    
  8.                     <th>K</th>    
  9.                     <th>D</th>    
  10.                     <th>Point</th>    
  11.                 </tr>    
  12.             </thead>    
  13.             <tbody></tbody>    
  14.         </table>    
  15. </div>  
Now as JSON for that Add below code in the JavaScript file:
  1. var data = [{    
  2.     'order': '1',    
  3.         'name': 'Harshad',    
  4.         'k': '3',    
  5.         'd': '0',    
  6.         'score': '121',    
  7.         'id': '540'    
  8. }, {    
  9.     'order': '2',    
  10.         'name': 'Rajesh',    
  11.         'k': '15',    
  12.         'd': '3',    
  13.         'score': '122',    
  14.         'id': '541'    
  15. }, {    
  16.     'order': '3',    
  17.         'name': 'Bingo',    
  18.         'k': '0',    
  19.         'd': '23',    
  20.         'score': '123',    
  21.         'id': '542'    
  22. }];    
  23.     
  24. var currentID = 541;    
  25.     
  26. var transform = {    
  27.     tag: 'tr',    
  28.     children: [{    
  29.         "tag": "td",    
  30.             "html": "${order}"    
  31.     }, {    
  32.         "tag": "td",    
  33.             "html": "${name}"    
  34.     }, {    
  35.         "tag": "td",    
  36.             "html": "${k}"    
  37.     }, {    
  38.         "tag": "td",    
  39.             "html": "${d}"    
  40.     }, {    
  41.         "tag": "td",    
  42.             "html": "${score}"    
  43.     }]    
  44. };    
  45.     
  46. $('#placar > tbody ').json2html(data, transform);    
If you do the upar thing ur output is below: 
Gönderen zaman: Hiç yorum yok:

JS : JavaScript LocalStorage and SessionStorage

The storage objects enable you to set data that is "remembered" as the user visits all of the pages on your domain. There are two types of storage objects that we can establish, sessionStorage andlocalStorage. sessionStorage data is only available in the tab it was established in, and will expire when the tab is closed. localStorage data is more long term, it is available in all tabs and remains persistent even if the browser software is closed then re-opened.
  1. //Page1.html    
  2. < script >  
  3.     // Establish both types of storage data for a test    
  4.     localStorage.setItem("firstname", "Kaushik"); // persistent data    
  5. sessionStorage.setItem("lastname", "S"); // persistent session data    
  6. < /script>   < a href = "page2.html" > Go to other page < /a>    

Notice how sessionStorage data is not available when you open Page2.html in a new tab, or if the browser is closed. And notice how localStorage data remains persistent even in new browsing tabs and when browser is closed/opened.  

  1. page2.html  
  2.   
  3.  < script > document.write(localStorage.firstname + " " + sessionStorage.lastname); < /script>    
Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)