1

問題の解決策について説明する: 矢印キーを使用して移動する

http://jsfiddle.net/BdVB9/

テキスト入力のある同じテーブルがあり、セル間の移動中にテーブルセルの入力ボックスでテキストを選択する際に問題が発生しました。

誰でも私がそれを解決するのを助けることができますか? ナビゲーションは正常に機能しますが、入力ボックスでテキストを選択できません!!! また、すべてではなく、入力ボックスを持つセル間のみを移動したい

注: テキスト入力ボックスがあるセル間を移動したいだけです。

テーブルコード:

    <table border="1" id="navigate">
    <tbody>
        <tr>
            <td><input type="text" id="1" class="input"></td>
            <td></td>
            <td><input type="text" id="3" class="input"></td>
            <td></td>
            <td><input type="text" id="5" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="6" class="input"></td>
            <td><input type="text" id="7" class="input"></td>
            <td></td>
            <td><input type="text" id="9" class="input"></td>
            <td><input type="text" id="10" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="11" class="input"></td>
            <td><input type="text" id="12" class="input"></td>
            <td></td>
            <td><input type="text" id="14" class="input"></td>
            <td><input type="text" id="15" class="input"></td>
        </tr>
    </tbody>
</table>

そしてこれは私自身の悪魔です

4

2 に答える 2

5

あなたが指定した機能を備えたフィドルをまとめましたhttp://jsfiddle.net/tppiotrowski/L7cm8/10/。私はあなたの要件を正しく理解したことを望みます。変更が必要な場合、またはコードがわからない場合はお知らせください。幸運を！

var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();

$(document).keydown(function(e) {
    reCalculate(e);
    rePosition();
    // if key is an arrow key, don't type the user
    // input. if it is any other key (a, b, c, etc)
    // edit the text
    if (e.keyCode > 36 && e.keyCode < 41) {
        return false;
    }
});

$('td').click(function() {
    active = $(this).closest('table').find('td').index(this);
    rePosition();
});


function reCalculate(e) {
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    var temp;

    if (e.keyCode == 37) { //move left or wrap
        temp = active;
        while (temp > 0) {
            temp = temp - 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 38) { // move up
        temp = active;
        while (temp - columns >= 0) {
            temp = temp - columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 39) { // move right or wrap
        temp = active;
        while (temp < (columns * rows) - 1) {
            temp = temp + 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 40) { // move down
        temp = active;
        while (temp + columns <= (rows * columns) - 1) {
            temp = temp + columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
}

function rePosition() {
    console.log(active);
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');

    var input = $('#navigate tr td').eq(active).find('input').focus();
    scrollInView();
}

function scrollInView() {
    var target = $('#navigate tr td:eq(' + active + ')');
    if (target.length) {
        var top = target.offset().top;

        $('html,body').stop().animate({
            scrollTop: top - 100
        }, 400);
        return false;
    }
}​
于 2012-11-22T13:35:29.087 に答える
2

このJQFAQの投稿をご覧ください。クリックキーまたはナビゲーションキーを使用してテーブルセルを選択するにはどうすればよいですか。 これにはあなたが欲しいものがあります。

于 2012-11-23T11:29:04.843 に答える