¿Hay alguna forma de extender jQuery para manejar un evento de tecla de entrada personalizado?

Question

Escribo el siguiente código todo el tiempo para manejar cuando se presiona la tecla Intro:

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

¿Hay alguna manera de extender jQuery para poder escribir:

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

Answer 1

Se puede extender jQuery algo como:

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

¿Qué se puede invocar como:

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

Answer 2

Se puede hacer lo que dice David G, pero tal vez la forma más correcta de abordar esto sería escribir un evento personalizado:

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

Lo que podría ser obligado de esta manera:

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

Vea un ejemplo aquí: http://jquery.nodnod.net/cases/1821/ ejecutar

La ventaja de este enfoque es que se puede unir, unbind, espacio de nombres, y desencadenar el evento como cualquier otro evento en jQuery.

Answer 3

Se puede definirlo como un plugin con un poco menos de código como este:

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

El uso de esta manera:

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

Este enfoque ignora todavía <textarea>, pero en lugar de revisar cada golpe de teclado, que nunca se unen al evento keypress a cualquier área de texto.

Answer 4

Esto es lo que uso para capturar la tecla Intro en cualquier elemento del formulario y convertirlo en una pestaña.Lo hice para que la tecla Intro funcione normalmente en un área de texto y en los elementos de envío, reinicio y botón.

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

Y para usarlo se llama así.

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

O

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