Question

我正在尝试创建一种将高尔夫分数插入数据库的简单方法。我想使用jquery使它更好用户友好。我不必担心没有启用js的人，因为我将是唯一使用它的人。

我创建了一个测试页面，你可以去看看我到目前为止所拥有的内容，

www.barriemenshockey.com/testing/index.php

基本上，当用户（我）点击一个单元格时，我有我想要的东西，一切都很好。但我希望能够按Tab键并转到下一个洞，再次键入数字命中选项卡以转到下一个洞，依此类推。希望这是有道理的。

这是我到目前为止的JS：

<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>

结构是这样的：

<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>

感谢您的帮助。

尼克

Answer 1

附加到输入的事件需要通过jQuery的live（）函数附加，因为您的输入会动态添加到dom中。

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

编辑：这是一个适合您的解决方案。

$("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 2

当文本框失去焦点时，您可以使用.blur jquery event挂钩。无论你是否有标签，点击等，这都可以。

就选项卡而言，您可以在输入标记中指定Tab键顺序，例如：

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

这将控制用户选项卡时光标所在的位置。结合上面的两个想法，你应该好好去..

Answer 3

您是否尝试过添加

event.preventDefault();

在这里：

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

在选项卡上，使用jquery调用自定义函数

3 个答案: