0

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 は次のようになります (これは 1 つのテキスト ボックスのみです。タブ インデックスを除いて、他のすべては同じです)。

<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 に答える