有没有办法扩展 jQuery 来处理自定义输入键事件？答案

【问题标题】：Is there way to extend jQuery to handle a custom enter key event?有没有办法扩展 jQuery 来处理自定义输入键事件？
【发布时间】：2010-03-26 17:44:01
【问题描述】：

我一直写下面的代码来处理当回车键按下的时候：

$("#selectorid").keypress(function (e) {
    if (e.keyCode == 13) {
        var targetType = e.originalTarget
            ? e.originalTarget.type.toLowerCase()
            : e.srcElement.tagName.toLowerCase();
        if (targetType != "textarea") {
            e.preventDefault();
            e.stopPropagation();
            // code to handler enter key pressed
        }
    }
});

有没有办法扩展 jQuery 以便我可以编写：

$("#selectorid").enterKeyPress(fn);

【问题讨论】：

标签： javascript jquery jquery-plugins jquery-events

【解决方案1】：

你可以像这样扩展 jquery：

jQuery.fn.returnPress = function(x) {
  return this.each(function() {
    jQuery(this).keypress(function(e) {
      if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        x();
        return false;
      }
      else {
        return true;
      }
    });
  });
};

可以这样调用：

$('selector').returnPress(function() { alert('enter pressed'); });

【讨论】：

【解决方案2】：

您可以按照 David G 所说的做，但最正确的方法可能是编写自定义事件：

$(document).keypress(function(evt){
    if(evt.keyCode==13) $(evt.target).trigger('enterPress');
});

可以这样绑定：

$(document).bind('enterPress', fn);

在此处查看示例：http://jquery.nodnod.net/cases/1821/run

这种方法的优点是您可以像 jQuery 中的任何其他事件一样绑定、取消绑定、命名空间和触发事件。

【讨论】：

当然，evt.target 在 IE 中不起作用。在这些情况下使用 evt.srcElement。
@cpharmston：代码使用的是 jQuery。 .target 在 jQuery 中工作。
+1 是唯一实际使用自定义事件的解决方案（到目前为止）。 ;-)

【解决方案3】：

您可以将其定义为一个插件，代码少一点，如下所示：

jQuery.fn.enterKeyPress = function(callback) {
  return this.not("textarea").keypress(function (e) {
    if (e.keyCode == 13) {
      callback($(this));
      return false;
    }
  });
};

这样使用：

$("input").enterKeyPress(function() { alert('hi'); });

这种方法仍然会忽略<textarea>，但我们不会检查每一次击键，而是永远不会将keypress 事件绑定到任何文本区域。

【讨论】：

this.not("textarea") 将不起作用，因为 'this' 将是表单。不是输入。其余的工作:)
@Ken - 从您的回答来看，您似乎会将其绑定到文本框或其他输入。但是，您可以将此格式与委托绑定，它会捕获所有不在文本框中的按键事件，例如您的问题，例如$("#formId :input") 作为选择器。
事件冒泡。最初的目标是输入，但事件将在容器 div（或表单）中处理。对不起，我应该让问题更清楚。感谢您的回答。
不错的答案，那么是否可以启用bind("click","enterKeyPress"？
不是在这种情况下，你可以，但它不会做任何事情，因为它没有触发那个事件。如果您希望将其作为一个事件，您可以为所有执行$('textarea').keypress(function(e) { if (e.keyCode == 13) { $(e.target).trigger('enterKeyPres'); } }); 的元素创建一个.live() 处理程序，然后您可以绑定它.bind('enterKeyPress', myfunction); :)。

【解决方案4】：

这是我用来捕获任何表单元素上的 enter 键并将其转换为选项卡的方法。我已经做到了，因此 enter 键在 textarea 中以及在提交、重置和按钮元素上正常工作。

$.fn.focusNext = function(e) {
  var t = $(this);
  if ( t.is(":submit")==true || t.is(":reset")==true || t.is("textarea")==true || t.is("button")==true ) { exit(); }

  if (e.which==13 || e.which==3) {
    return this.each(function() {
      e.preventDefault();
      var fields = $(this).parents("form:eq(0)").find(":input:visible");
      var index = fields.index( this );
      if ( index > -1 && ( index + 1 ) < fields.length ) { fields.eq( index + 1 ).focus(); }
    });
  }
  return true;
};

为了使用它，它是这样称呼的

$(":input").keypress(function(e) { $(this).focusNext(e); });

或

$(":input").live("keypress", function(e) { $(this).focusNext(e); });

【讨论】：