獲取涉及觸發事件的元素ID

Question

我已經搜索谷歌，但似乎沒有人遇到過這個問題。我在表單上設置了按鍵事件。我禁用了輸入鍵（直到填寫了所有必填字段）並嘗試啓用+鍵以移至表單上的下一個可用輸入區域。我的表格非常具有動態性，除了兩個必填字段之外，所以當他們按+鍵時，我不會知道某人所在的字段元素。我只需要移動到下一個表單輸入元素。這是我的代碼到目前爲止。輸入密鑰的禁用工作正常。我只需要找到一種將焦點從當前輸入字段移動到下一個可用輸入字段的方法。所以如果你知道更好的方法，請讓我知道。

<form id="FormVoucher" name="FormVoucher" method="post" action="index.php"> 
    <table width="100%"> 
     <tr> 
     <td>Supplier Number:</td> 
     <td><input type="text" size="25" value="" name="Facctnmb" id="Facctnmb" AUTOCOMPLETE=OFF /></td> 
     </tr> 
     <tr> 
     <td>Invoice Number:</td> 
     <td><input type="text" name="Finvnmb" id="Finvnmb" size="25" maxlength="25" AUTOCOMPLETE=OFF /></td> 
     </tr> 
     <tr> 
     <td>Invoice Amount:</td> 
     <td><input type="text" name="Finvamt" id="Finvamt" size="25" maxlength="30" AUTOCOMPLETE=OFF /></td> 
     </tr> 
     <tr> 
     <td>Invoice Date:</td> 
     <td><input type="text" name="Finvdt" id="Finvdt" size="10" AUTOCOMPLETE=OFF /></td> 
     </tr> 
     <tr> 
     <td>Purchase Order:</td> 
     <td><input type="text" name="Fpo" id="Fpo" size="10" maxlength="8" AUTOCOMPLETE=OFF /></td> 
     </tr> 
     <tr> 
     <td>Remark:</td> 
     <td><input name="Fremark" id="Fremark" type="text" size="30" maxlength="30" AUTOCOMPLETE=OFF /></td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
    </table> 
    <div align="left"> 
     <p>G/L: <input name="Fgl[]" id="Fgl[]" type="text" size="12" maxlength="15" AUTOCOMPLETE=OFF /> Amount: <input name="Famt[]" id="Famt[]" type="text" size="15" maxlength="15" AUTOCOMPLETE=OFF /></p> 
     <p id="add-element">Add More G/L Lines For Entry</p> 
     <div id="content"></div> 
     <input type="submit" value="Submit" /> 
    </div> 
    </form> 

的javascript

var t; 
//clear the search box on focus 
function ClearIt(ClrIt) 
{ 
    if (ClrIt.value != "") ClrIt.value = ""; 
} 

//move to next form input field. 
$.fn.focusNextInputField = function() { 
    return this.each(function() { 
     var fields = $(this).parents('form:eq(0),body').find(':input').not('[type=hidden]'); 
     var index = fields.index(this); 
     if (index > -1 && (index + 1) < fields.length) { 
      fields.eq(index + 1).focus(); 
     } 
     return false; 
    }); 
}; 

//listen for the enter key and the + key being pressed 
$('#FormVoucher').keypress(function(event) { 
    var keycode = (event.keyCode ? event.keyCode : event.which); 
    if(keycode == 13){ 
    event.preventDefault(); 
    }//$("form:FormVoucher").trigger("submit") 
    if(keycode == 43){ 
    event.preventDefault(); 
    $(this).focusNextInputField(); //Here is the problem, I need to enter the element id instead of... this 
    } 
}); 

//add another set of input fields to the form. 
var Dom = { 
    get: function(el) { 
    if (typeof el === 'string') { 
     return document.getElementById(el); 
    } else { 
     return el; 
    } 
    }, 
    add: function(el, dest) { 
    var el = this.get(el); 
    var dest = this.get(dest); 
    dest.appendChild(el); 
    }, 
    remove: function(el) { 
    var el = this.get(el); 
    el.parentNode.removeChild(el); 
    } 
}; 
var Event = { 
    add: function() { 
    if (window.addEventListener) { 
     return function(el, type, fn) { 
Dom.get(el).addEventListener(type, fn, false); 
     }; 
    } else if (window.attachEvent) { 
     return function(el, type, fn) { 
var f = function() { 
    fn.call(Dom.get(el), window.event); 
}; 
Dom.get(el).attachEvent('on' + type, f); 
     }; 
    } 
    }() 
}; 
Event.add(window, 'load', function() { 
    var i = 0; 
    Event.add('add-element', 'click', function() { 

    var ela = document.createElement('span'); 
    ela.innerHTML = ' --Delete' ; 
    var el = document.createElement('p'); 

    el.innerHTML = 'G/L: <input name="Fgl[]" id="Fgl[]" type="text" size="12" maxlength="15" AUTOCOMPLETE=OFF /> Amount: <input name="Famt[]" id="Famt[]" type="text" size="15" maxlength="15" AUTOCOMPLETE=OFF />'; 
    el.appendChild(ela); 
    Dom.add(el, 'content'); 

    Event.add(ela, 'click', function(e) { 
     Dom.remove(el); 
     Dom.remove(ela); 
    }); 
    }); 
}); 

Answer 1

變化：

$(this).focusNextInputField(); //Here is the problem 

分爲：

$(event.target).focusNextInputField(); //No longer a problem :) 

檢查這裏：http://jsfiddle.net/EAudU/

編輯：用於獲取元素的id，作爲問題標題要求，請參閱next answer by Chris。

Answer 2

要獲取觸發該事件的DOM元素的ID：

$(event.target).attr("id")

實施例：

$("button").click(function(event){ 
    var id = $(event.target).attr("id"); 
    alert (id); 
});