タブキー JEditable分野

Question

しているページのJQueryを使うとJeditableを編集可能なテキスト要素のページです。

編集中の要素になってくれると思うのでタブの一要素にする。

私の美しく雄大なぢ大自然に包方法:

• 利用jeditableはjqueryのタブキーイベント(キーコード=9)

• そのイベントが検出された移動フォーカスを次の要素と活性化で経由jeditable

談ください。よろしく！

Answer 1

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

$('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
    };
});

タブで、ダブルクリックが（jeditableはDBLCLICKイベントを使用するために、ここで設定されている）次のボックスに送信されます。それは（一意のクラスが割り当てられて、私はセレクタで問題が発生していた）最後の編集ボックスなら、それは最初に行くます。

Iも使用検索（「入力」）Iはぼかすjeditable作成した入力を選んだ別のセレクタを見つけることができませんでしたように。

最適ではないが、それは動作します。

Answer 2

$('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;         
};
}); 

これをチェックしますか それはあなたを助けるでしょう。

Answer 3

一つの解決策は、編集可能な要素はリスニング、あるいはおそらく書類を行うための容器を作ることであろう。その編集可能な要素のための文書またはコンテナを照会する最も現在編集されているかを決定し、リスト内の次の要素に移動する簡単な作業

Answer 4

ただ、わずかな追加 - あなたのjeditableフィールドが他の要素内にネストされている場合は、 'nextBox = $（この）.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
    };
});