jquery - 获取参与触发事件的元素 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

获取触发事件的 DOM 元素的 ID:

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

例子:

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