Есть ли способ расширить jQuery для обработки пользовательского события ввода ключа?

Question

Я все время пишу следующий код для обработки при нажатии клавиши enter:

$("#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);

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

Answer 2

Вы можете сделать то, что говорит Дэвид Джи, но, возможно, самым правильным подходом к этому было бы написать пользовательское событие:

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

Который мог бы быть связан следующим образом:

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

Смотрите пример здесь: http://jquery.nodnod.net/cases/1821/run

Преимущество этого подхода заключается в том, что вы можете привязывать, отменять привязку, использовать пространство имен и запускать событие, как любое другое событие в jQuery.

Answer 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 событие в любую текстовую область.

Answer 4

Это то, что я использую для захвата клавиши ввода в любом элементе формы и преобразования ее в вкладку.Я сделал так, чтобы клавиша enter нормально работала в текстовой области, а также с элементами submit, reset и button.

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