Question

我搜索过Google，但似乎没有人遇到过这个问题。我在表单上设置了按键事件。我正在禁用回车键（直到填写所有必填字段）并尝试启用+键以用于移动到表单上的下一个可用输入区域。除了几个必填字段之外，我的表单是高度动态的，所以当他们按下+键时我不知道有人在哪个字段元素。我只需要移动到下一个表单输入元素。到目前为止，这是我的代码。禁用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);
    });
  });
});

Answer 1

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

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

示例：

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

Answer 2

变化：

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

分为：

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

点击此处：http://jsfiddle.net/EAudU/

编辑：要获取元素ID，请问问题标题，请参阅next answer by Chris。

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

2 个答案: