En fonction onglet d'appel de presse personnalisé à l'aide jquery

Question

Je suis en train de créer un moyen simple d'insérer des scores de golf dans une base de données. Je veux utiliser jquery pour le rendre agréable et convivial. Je n'ai pas à m'inquiéter de ne pas avoir js activé car je serai le seul à l'utiliser.

J'ai créé une page de test, vous pouvez aller regarder ce que j'ai jusqu'à présent ici,

www.barriemenshockey.com/testing/index.php

Score Entry

Fondamentalement, j'ai ce que je veux quand l'utilisateur (moi) clique sur une cellule, tout fonctionne très bien. Mais je veux être en mesure d'appuyer sur la touche et passer au trou suivant, tapez à nouveau un onglet de hit pour passer au trou suivant et ainsi de suite. J'espère que cela a du sens.

Voici la JS je jusqu'à présent:

<script type="text/javascript"> 
var tabindex = 1; 

$(document).ready(function() 
{ 
    //on click 
    $("div").click(function() 
    {   
     dowork($(this)); 
    }); 

    $().keypress(function(event) 
    { 
     if (event.keyCode == 9) 
     { 
      var temp = $("#"+tabindex); 
      dowork(temp); 
      $("#10").html(tabindex); 
     } 
    }); 
}); 

function dowork(ob) 
{ 
    var number = $(ob).text(); 
    $(ob).empty(); 
    $(ob).append($("<input size=\'2\' style=\'border: none; text-align:center;\'>")); 
    $(ob).find("input").focus(); 
    var input = $(ob).find("input");  

    input.blur(function(e) 
    { 
     //return it to its last known number 
     if (input.val() == "") 
      input.val(number); 
     else 
      tabindex++; 

     //remove the input html from the div 
     var last = input.val(); 
     $(ob).html(last); 
    });   
} 
</script> 

Et la structure est comme ceci:

<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
      <td>Out</td> 
     </tr> 
     <tr> 
      <td><div id="1">&nbsp;</div></td> 
      <td><div id="2">7</div></td> 
      <td><div id="3">&nbsp;</div></td> 
      <td><div id="4">&nbsp;</div></td> 
      <td><div id="5">&nbsp;</div></td> 
      <td><div id="6">&nbsp;</div></td> 
      <td><div id="7">&nbsp;</div></td> 
      <td><div id="8">&nbsp;</div></td> 
      <td><div id="9">&nbsp;</div></td> 
      <td><div id="out">0</div></td> 
     </tr> 
     <tr> 
      <td>10</td> 
      <td>11</td> 
      <td>12</td> 
      <td>13</td> 
      <td>14</td> 
      <td>15</td> 
      <td>16</td> 
      <td>17</td> 
      <td>18</td> 
      <td>In</td> 
     </tr> 
     <tr> 
      <td><div id="10">&nbsp;</div></td> 
      <td><div id="11">&nbsp;</div></td> 
      <td><div id="12">&nbsp;</div></td> 
      <td><div id="13">&nbsp;</div></td> 
      <td><div id="14">&nbsp;</div></td> 
      <td><div id="15">&nbsp;</div></td> 
      <td><div id="16">&nbsp;</div></td> 
      <td><div id="17">&nbsp;</div></td> 
      <td><div id="18">&nbsp;</div></td> 
      <td><div id="in">0</div></td> 
     </tr> 
     <tr> 
      <td colspan="9">&nbsp;</td> 
      <td><div id="total">0</div></td> 
     </tr> 
    </table> 

Merci pour l'aide.

Nick

Answer 1

Vous pouvez utiliser le .blur jquery event pour accrocher dans lorsque la zone de texte perd le focus. Cela fonctionnerait indépendamment du fait que vous onglet, cliquez, etc.

En termes de l'onglet, vous pouvez spécifier l'ordre de tabulation dans la balise d'entrée, tels que:

<input id="hole1" tabindex="1" /> 
<input id="hole2" tabindex="2" /> 
.... 

Ceci permet de contrôler où le curseur se lorsque les onglets de l'utilisateur. Combiner les deux idées ci-dessus et vous devriez être bon d'aller ..

Answer 2

Les événements attachés à l'entrée doivent être joints via la fonction en direct() jQuery, puisque vos entrées sont ajoutées dynamiquement au dom.

http://api.jquery.com/live/

EDIT: Voici une solution de travail pour vous.

$("div").click(function() { 
      $div = $(this) 
      var number = $div.text(); 
      $div.empty(); 
      $div.append("<input size=\'2\' style=\'border: none; text-align:center;\'>"); 
      $div.find('input').focus().val(number); 
     }); 

     $('input').live('keydown',function(event) { 
      var keycode = event.keyCode; 
      if (keycode == 9) { 
       var $div = $(this).parent(); 
       var nextID = parseInt($div.attr('id')) + 1; 
       $div.html($(this).val()); 
       $('#' + nextID).click(); 
       event.preventDefault(); 
      } 
     }); 

Answer 3

Avez-vous essayé d'ajouter un

event.preventDefault(); 

ici:

if (event.keyCode == 9) 
     { 
      event.preventDefault(); 
      var temp = $("#"+tabindex); 
      dowork(temp); 
      $("#10").html(tabindex); 
     }