8

JQuery と Jeditable を使用してページ上に編集可能なテキスト要素を作成するページがあります。

要素の編集中に、ある要素から次の要素にタブで移動できるようにしたいと考えています。

次の方法がわかりません。

  • jeditable または jquery を使用して、タブ キー イベント (キーコード = 9) をキャプチャします。

  • そのイベントが検出されたら、フォーカスを次の要素に移動し、jeditable を介してアクティブ化します

どんな助けでも感謝します。ありがとう！

4

4 に答える 4

6

私はそれを行う方法を見つけることができました：

$('div.editbox').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
        $(this).find("input").blur();
        var nextBox='';
         if ($("div.editbox").index(this) == ($("div.editbox").length-1)) {
                nextBox=$("div.editbox:first");         //last box, go to first
            } else {
                nextBox=$(this).next("div.editbox");    //Next box in line
            }
        $(nextBox).dblclick();  //Go to assigned next box
        return false;           //Suppress normal tab
    };
});

タブで、ダブルクリック (ここでは dblclick イベントを使用するように jeditable が設定されています) が次のボックスに送信されます。それが最後の編集ボックスである場合 (独自のクラスが割り当てられているため、セレクターに問題がありました)、最初の編集ボックスに移動します。

また、ぼかしのために jeditable で作成された入力を選択した別のセレクターを見つけることができなかったため、find("input") も使用しました。

最適ではありませんが、機能します。

于 2009-05-20T15:58:14.003 に答える
1 
$('div.edit').bind('keydown', function(evt) {
if(evt.keyCode==9) {
    var nextBox='';
    var currentBoxIndex=$("div.edit").index(this);
     if (currentBoxIndex == ($("div.edit").length-1)) {
           nextBox=$("div.edit:first");         
       } else {
            nextBox=$("div.edit").eq(currentBoxIndex+1);    
       }
    $(this).find("input").blur();
    $(nextBox).click();  
    return false;         
};
});

これを確認してください。

于 2011-09-23T09:27:58.443 に答える
0

解決策の 1 つは、編集可能な要素のコンテナにリッスンを行うようにすることです。次に、編集可能な要素についてドキュメントまたはコンテナをクエリし、現在最も編集されている要素を特定し、リスト内の次の要素に移動するという簡単なタスクです。

于 2009-05-20T00:05:03.853 に答える
0

ちょっとした追加 - jeditable フィールドが他の要素内にネストされている場合、'nextBox=$(this).next("div.editbox");' 機能しないため、「対象の」要素の配列を作成し、その中から作業します...

$('.editable_textarea').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
        $(this).find("input").blur();
        // create an array of targeted jeditable fields
        var boxArray = $("#parent_element").find('.editable_textarea')
        var nextBox = '';
        if ($('.editable_textarea').index(this) == ($('.editable_textarea').length-1)) {
            nextBox = $(".editable_textarea:first");         //last box, go to first
        } else {
            // use the index of the active field to find the next one in the boxArray
            nextBox = boxArray[$('.editable_textarea').index(this)+1];    //Next box in line
        }
        $(nextBox).click();  //Go to assigned next box
        return false;           //Suppress normal tab
    };
});
于 2014-02-15T11:57:11.507 に答える