週期焦點從最後元素和副版本的第一個表單元素

Question

我創建了一個表單，其中它提交輸入更改的malsup的表單插件。我已經建立了我的jQuery腳本來爲下拉菜單和可見輸入建立索引，並使用該索引來確定tab的keydown是否應將焦點移動到下一個元素或第一個元素，同樣使用shift + tab keydown。然而，並不像我希望的那樣將焦點移動到選項卡keydown上最後一個元素的第一個元素，而是將焦點移至第二個元素。我該如何改變它以將注意力集中到實際的第一個和最後一個元素上？以下是我的表單的實時鏈接：http://www.presspound.org/calculator/ajax/sample.php。感謝任何試圖提供幫助的人。這裏是我的腳本：

$(document).ready(function() { 
var options = { 
    target: '#c_main', 
    success: setFocus 
}; 
$('#calculator').live('submit', function() { 
    $(this).ajaxSubmit(options); 
    return false; 
}); 
$(this).focusin(function(event) { 
    var shiftDown = false; 
    $('input, select').each(function (i) { 
     $(this).data('initial', $(this).val()); 
    }); 
    $('input, select').keyup(function(event) { 
     if (event.keyCode==16) { 
      shiftDown = false; 
      $('#shiftCatch').val(shiftDown); 
     } 
    }); 
    $('input, select').keydown(function(event) { 
     if (event.keyCode==16) { 
      shiftDown = true; 
      $('#shiftCatch').val(shiftDown); 
     } 
     if (event.keyCode==13) { 
      $('#captured').val(event.target.id); 
     } else if (event.keyCode==9 && shiftDown==false) { 
      return $(event.target).each(function() { 
       var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible'); 
       var index = fields.index(this); 
       var nextEl = fields.eq(index+1).attr('id'); 
       var firstEl = fields.eq(0).attr('id'); 
       var focusEl = '#'+firstEl; 
       if (index>-1 && (index+1)<fields.length) { 
        $('#captured').val(nextEl); 
       } else if(index+1>=fields.length) { 
        if ($(this).val() != $(this).data('initial')) { 
         $('#captured').val(firstEl); 
        } else { 
         event.preventDefault(); 
         $(focusEl).focus(); 
        } 
       } 
       return false; 
      }); 
     } else  if (event.keyCode==9 && shiftDown==true) { 
      return $(event.target).each(function() { 
       var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible'); 
       var index = fields.index(this); 
       var prevEl = fields.eq(index-1).attr('id'); 
       var lastEl = fields.eq(fields.length-1).attr('id'); 
       var focusEl = '#'+lastEl; 
       if (index<fields.length && (index-1)>-1) { 
        $('#captured').val(prevEl); 
       } else if (index==0) { 
        if ($(this).val() != $(this).data('initial')) { 
         $('#captured').val(lastEl); 
        } else { 
         event.preventDefault(); 
         $(focusEl).select(); 
        } 
       } 
       return false; 
      }); 
     } 
    }); 
}); 

}）; function setFocus（）{ with（document.calculator） var recap = document.getElementById（recaptured.value）; 如果（重溫！= NULL）{ 的setTimeout（函數（）{ 如果（recap.getAttribute（ '類型'）== '文本'）{ recap.select（）;} 其他{ recap.focus（ ）; } }，100）; }}

編輯＃1：我做的代碼，這給我帶來了一點點接近我想要的腳本功能，一些小的改動。但是，我只對與焦點相關的代碼做了一處更改：我試圖在按最後一個元素（也是第一個元素上的shift + tab keydown）時禁用標籤keydown，試圖強制關注我想要的元素不會像它一直在跳過它一樣。這是我添加的代碼：

$(this).one('keydown', function (event) { 
    return !(event.keyCode==9 && shiftDown==true); 
}); 

這類作品。加載頁面後，如果用戶按下最後一個元素上的選項卡而不更改其值，則焦點將設置爲第二個元素。但是，用戶第二次按下最後一個元素上的選項卡而不更改其值時，以後的每個時間都會將焦點設置爲第一個元素，就像我希望的那樣。

編輯＃2：我替換了編輯＃1中的代碼，其中的代碼使用了event.preventDefault（），它的工作更好。而如果用戶在第一個元素中執行shift + tab keydown，焦點就會移動到最後一個元素。但是，如果用戶繼續按住shift鍵並再次按下標籤，則焦點將被設置回第一個元素。如果用戶繼續按住Shift鍵並點擊標籤，焦點將回到最後一個元素。焦點將在第一個元素和最後一個元素之間來回切換，直到用戶提起換檔鍵。僅當按下製表符時不會發生此問題。這是新的代碼片段：

event.preventDefault(); 
$(focusEl).focus(); 

Answer 1

這是解決方案，如果沒有西門子的幫助，我無法達到這個目標。再次感謝，西門子。

$(document).ready(function() { 
    var options = { 
     target: '#c_main', 
     success: setFocus 
    }; 
    $('#calculator').live('submit', function() { 
     $(this).ajaxSubmit(options); 
     return false; 
    }); 
    $(this).focusin(function(event) { 
     $('#calculator :input:visible').each(function (i) { 
      $(this).data('initial', $(this).val()); 
     }); 
     return $(event.target).each(function() { 
      $('#c_main :input:visible').live(($.browser.opera ? 'keypress' : 'keydown'), function(event){ 
       var elements = $("#calculator :input:visible"); 
       var n = elements.length; 
       var currentIndex = elements.index(this); 
       if (event.keyCode == 13) { //if enter 
        var focusElement = elements.eq(currentIndex).attr('id'); 
        $('#captured').val(focusElement); 
       } else if (event.keyCode == 9) { //if tab 
        var newIndex = event.shiftKey ? (currentIndex - 1) % n : (currentIndex + 1) % n; 
        var el = elements.eq(newIndex); 
        var focusElement = el.attr('id'); 
        if ($(this).val() != $(this).data('initial')) { 
         $('#captured').val(focusElement); 
        } else if ((currentIndex==0 && event.shiftKey) || (currentIndex==n-1 && !event.shiftKey)) { 
         event.preventDefault(); 
         if (el.attr('type')=='text') { 
          $.browser.msie ? "" : $(window).scrollTop(5000); 
          el.select().delay(800); 
         } else { 
          $.browser.msie ? "" : $(window).scrollTop(-5000); 
          el.focus().delay(800); 
         } 
        } else if (el.is('select')) { 
         event.preventDefault(); 
         if (el.attr('type')=='text') { 
          el.select(); 
         } else { 
          el.focus(); 
         } 
        } 
       } 
      }); 
     }); 
    }); 
}); 

function setFocus() { 
    with (document.calculator) 
    var recap = document.getElementById(recaptured.value); 
    if (recap!=null) { 
     setTimeout(function() { 
      if (recap.getAttribute('type')=='text') { 
       recap.select(); 
      } else { 
       recap.focus(); 
      } 
     }, 1 ); 
    } 
} 

我把可用在我的活鏈接下載我的文件：http://www.presspound.org/calculator/ajax/sample.php

Answer 2

你有很多的代碼，我沒有得到過完整的概述，所以我不知道如果我錯過了一些你就想集成的功能，但對於黏合/班通過表單元素-tabbing，這應該做的工作：

var elements = $("#container :input:visible"); 
var n = elements.length; 
elements 
.keydown(function(event){ 
    if (event.keyCode == 9) { //if tab 
     var currentIndex = elements.index(this); 
     var newIndex = event.shiftKey ? (currentIndex - 1) % n : (currentIndex + 1) % n; 
     var el = elements.eq(newIndex); 
     if (el.attr("type") == "text") 
      elements.eq(newIndex).select(); 
     else 
      elements.eq(newIndex).focus(); 
     event.preventDefault(); 
    } 
}); 

elements將包含所有輸入字段jQuery對象，在我的例子是在div #container 這裏面的所有輸入字段是一個演示：http://jsfiddle.net/rA3L9/