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:
Kaydol: Kayıtlar (Atom)