使用jQuery以表格形式跳轉到下一個輸入字段

Question

我想使用箭頭鍵在我的表單（下一個，上一個）中的輸入文本字段之間導航。我發現這個簡單的方法來實現它：link to it但對我來說它不工作...我在頭和FORM後的身體試過它，但沒有運氣...

我認爲問題可能是，我的表單通過AJAX發送回頁面...

我不熟悉jQuery，有人可以幫我一下嗎？

這是jQuery代碼：

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

Answer 1

如果您輸入domready中事件發生後動態創建的，你應該改變

$('input').keyup(function(e){ 
    ... 

到

$('body').on('keyup', 'input', function(e) { 
    ... 

這樣的keyup事件會使用事件代表團body元素捕獲

如需進一步信息在這裏看到的文檔：http://api.jquery.com/on/

事件處理程序只能綁定到當前選擇的元素;它們必須在代碼調用.on（）時存在於頁面上。爲確保元素存在且可以選擇，請在文檔就緒處理程序中爲頁面上HTML標記中的元素執行事件綁定。如果將新的HTML注入頁面，請在將新的HTML放入頁面後選擇元素並附加事件處理程序。或者，使用委託事件附加事件處理程序...

Answer 2

如果您的腳本在表單位於頁面之前加載，那麼鍵控綁定將無法在加載時進行綁定。嘗試使用：

$('input').live('keyup', function(e) { code here }); 

Answer 3

以防萬一你要綁定一個以上的事件，這是你怎麼做：

$('body').on({ 
    'keyup' : function(e) { 
     ... 
    }, 

    'keydown' : function(e) { 
     ... 
    } 
}, 'input'); 

而且'body'可以與'input'任何父元素進行交換，不會被動態地添加到頁面（即它在頁面加載時存在）。所以如果你有一些div包含每個input，你可能想要綁定它。

Answer 4

我對上面的代碼有了一些改進。代碼的問題在於，您無法在輸入字段內導航。例如。您的值爲'100.00 |'當前光標在最後（用|表示）。如果按左鍵，它將跳轉到prev輸入字段，而不是將插入符號移動一個位置爲'100.0 | 0'。

爲了做到這一點，您需要使用e.target.selectionStart檢查當前插入符的位置。但是，您還需要prev插入位置，否則無法識別脫字符號是否從1到0（不跳），或者脫字符號已經在0，並且用戶再次向左按（跳轉）。

我添加的另一個更改是隻考慮具有類tableInput的輸入字段。如果你想排除一些領域。

function(e){ 
     var charPos = e.target.selectionStart; 
    var strLength = e.target.value.length; 
    var prevPos = $(this).data('prevPos'); 
    if(e.which==39){ 
       //only go right if we really reached the end, that means the prev pos is the same then the current pos 
     if(charPos==strLength && (prevPos ==null || prevPos == charPos)){ 
      $(this).closest('td').next().find('input.tableInput').focus(); 
      $(this).data('prevPos',null); 
     }else{ 
      $(this).data('prevPos',charPos); 
     } 
    }else if(e.which==37){ 
//only go left if we really reached the beginning, that means the prev pos is the same then the current pos 
     if(charPos == 0 && (prevPos ==null || prevPos == charPos)){ 
      $(this).closest('td').prev().find('input.tableInput').focus(); 
      $(this).data('prevPos',null); 
     }else{ 
      $(this).data('prevPos',charPos); 
     } 
    }else if(e.which==40){ 
     $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus(); 
     $(this).data('prevPos',null); 

    }else if(e.which==38){ 
     $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus(); 
     $(this).data('prevPos',null); 
    } 
    });