Question

我的javascript遇到了一些麻烦，并希望你能提供帮助。

我正在使用此处的示例：http://www.knowlbase.in/2012/01/traverse-cursor-through-text-box-with.html在页面上的文本框之间移动。左右工作效果很好，但上下移动光标对角线向右移动（但按下向上键时对角线向上移动，按下向下键时对角向下移动）。

谁能看到我哪里出错了？

编辑 - 添加jsFiddle

这就是我所拥有的：

function arrowKeyPressed() {
$('input').keyup(function (e) {
    if (e.which == 39)
        $(this).closest('td').next().find('input').focus();
    else if (e.which == 37)
        $(this).closest('td').prev().find('input').focus();
    else if (e.which == 40)
        $(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
    else if (e.which == 38)
        $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
});
};

这就是我添加文本框属性的方法（所有文本框都是以编程方式创建的）：

tb.Attributes.Add("onkeyup", "arrowKeyPressed()");

这是HTML生成时的样子（这只是一个文本框;除了选项卡索引外，所有其他文本框都是相同的）：

<input name="ctl00$MainContent$addPrices$Textbox101"
type="text"id="ctl00_MainContent_addPrices_Textbox101" tabindex="13" 
onblur="validateText('ctl00_MainContent_addPrices_Textbox101', 
'ctl00_MainContent_addPrices_AddQuote', 'ctl00_MainContent_addPrices_msgLbl')" 
style="width:60px;">

有什么想法吗？

谢谢！

Answer 1

使用jQuery。我的意思是，在$(document).ready(function(){});

中使用此功能

$(document).ready(function () {
    $('input').keyup(function (e) {
        if (e.which == 39)
            $(this).closest('td').next().find('input').focus();
        else if (e.which == 37)
            $(this).closest('td').prev().find('input').focus();
        else if (e.which == 40)
            $(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
        else if (e.which == 38)
            $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
    });
});

Answer 2

您的无效HTML是此处的问题。 <th />仅允许<thead />个元素。因此，如果您使用<th />替换第一列的<td />标记，则可以正常使用。

<tr>
    <td>2013 04 Apr</td>
    <td>
        <input style="width:60px;">
    </td>
    <td>
        <input style="width:60px;">
    </td>
    <td>
        <input style="width:60px;">
    </td>
    <td>
        <input style="width:60px;">
    </td>
    <td>
        <input style="width:60px;">
    </td>
    <td></td>
</tr>
<!-- ... -->

updated fiddle

修改
“错误”行为的原因是<th />，但为了完整起见，我将详细说明为什么。

$(this).closest('td').index()

这确定了行中<td />的索引（包括<th />）。您用于构建仅查找<td />元素的选择器的索引。

'td:eq(' + $(this).closest('td').index() + ')'

所以你“缺少”了第一列（<th />）。

无法使用箭头键在文本框之间移动

2 个答案: