获取触发事件所涉及的元素id

我搜索过谷歌,但似乎没有人遇到这个问题。我在窗体上设置了一个按键事件。我正在禁用enter键(直到所有必需的字段都填写完毕),并尝试启用+键以移动到表单上的下一个可用输入区域。我的表单是高度动态的,而不是一对必需的字段,所以当他们按+键时,我不知道有人在使用什么字段元素。我只需要转到下一个表单输入元素。这是我目前的代码。禁用回车键可以正常工作。我只需要找到一种方法,将焦点从当前输入字段移动到下一个可用的输入字段。如果你知道更好的方法,请告诉我。

  <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);
    });
  });
});