Y at-il moyen d'étendre jQuery pour gérer une coutume entrer événement clé?

Question

Je vous écris le code suivant tout le temps à gérer quand la touche Entrée enfoncée:

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

Y at-il un moyen d'étendre jQuery pour que je puisse simplement écrire:

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

Answer 1

Vous pouvez étendre jquery quelque chose comme:

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

Ce qui peut être invoqué comme:

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

Answer 2

Vous pouvez faire ce que David G dit, mais peut-être la façon la plus correcte d'aborder ce serait d'écrire un événement personnalisé:

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

Ce qui pourrait être lié comme ceci:

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

Voir ici un exemple: http://jquery.nodnod.net/cases/1821/ exécuter

L'avantage de cette approche est que vous pouvez lier, délier, espace de noms, et déclencher l'événement comme tout autre événement dans jQuery.

Answer 3

Vous pouvez le définir comme un plug-in avec un peu moins de code comme ceci:

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

Utilisez comme ceci:

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

Cette approche ne tient pas compte encore <textarea>, mais au lieu de vérifier chaque frappe, nous bind jamais l'événement keypress à tout textarea.

Answer 4

est ce que j'utiliser pour capturer la touche entrée sur un élément de forme, et le convertir dans un onglet. Je l'ai fait avec Entrée clé normalement dans une zone de texte, et soumettre, remise à zéro et les éléments de bouton.

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

Et pour l'utiliser, il est appelé comme si

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

ou

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