0

我的javascript有点问题，希望你能帮忙。

我在这里使用一个示例：http : //www.knowlbase.in/2012/01/traverse-cursor-through-text-box-with.html 在页面上的文本框之间移动。Left 和 Right 效果很好，但上下移动光标对角线向右移动（但是当按下向上键时它确实对角线向上移动，当按下向下键时它对角线向下移动）。

谁能看到我哪里出错了？

编辑 - 添加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;">

有任何想法吗？

谢谢！

4

2 回答 2

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();
    });
});
于 2013-04-15T10:47:37.257 回答
1

您的无效 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>
<!-- ... -->

更新的小提琴

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

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

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

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

因此，您“缺少”了第一列 ( <th />)。

于 2013-04-16T11:45:10.233 回答