2010-11-23 4 views
0

Tout est-ce sur-enter-script soumettre le formulaire jQuery. Avant de commencer à inonder "Ne le fais-tu pas déjà?" - oui si vous avez un bouton de soumission réel, il le fait.jQuery autosubmit sur entrer, demander des améliorations

Mais j'utilise <a> des balises stylées comme des boutons pour soumettre le formulaire. À moins que le javascript est désactivé une <noscript> révélera une norme réelle à la recherche submitButton.

Il devrait gérer la fonctionnalité de saisie semi-automatique par défaut des navigateurs, en désactivant temporairement la soumission automatique lorsque les touches fléchées haut/bas sont enfoncées, ce qui permet de parcourir la liste de saisie semi-automatique.

Si vous voyez des mises en garde, ou avoir des idées d'amélioration, ils seraient beaucoup aprécié.

est ici le script

// Submit form if focus on inputfields and enter is pressed 
// To handle autocomplete, we disable next enter if arrow up/down pressed and autocomplete is not turned off 
$('form input:text, form input:password').keyup(function(e){ 
    var arrowKeys = new Array(38, 40); 
    var key = e.charCode || e.keyCode || 0; 
    if(key == 13){ 
     if($(this).data('entersubmit')) { 
      e.preventDefault(); 
      $(this).closest('form').submit(); 
      return false; 
     } 
     $(this).data('entersubmit', true); 
    } else if($.inArray(key, arrowKeys) > -1) { 
     if($(this).attr('autocomplete') != 'off') { 
      $(this).data('entersubmit', false); 
     } 
    } 
}) 
.blur(function(){ 
    $(this).data('entersubmit', true); 
}) 
.focus(function(){ 
    $(this).data('entersubmit', true); 
}); 
+0

Je pourrais probablement omettre l'onFocus ou surBlur – Phliplip

Répondre

0

Je raccourcirait vers le bas à l'aide .bind() et une carte d'objet, $.data() pour éliminer les objets jQuery non nécessaires et event.which, qui est déjà normalisée, et une syntaxe de tableau plus courte, comme ceci:

$('form input:text, form input:password').bind({ 
    keyup: function(e){ 
    var arrowKeys = [38, 40]; 
    if(e.which == 13){ 
     if($.data(this, 'entersubmit')) { 
      $(this).closest('form').submit(); 
      return false; 
     } 
     $.data(this, 'entersubmit', true); 
    } else if($.inArray(key, arrowKeys) > -1) { 
     if($(this).attr('autocomplete') != 'off') { 
      $.data(this, 'entersubmit', false); 
     } 
    } 
    }, 
    blur: function() { 
    $.data(this, 'entersubmit', true); 
    }, 
    focus: function(){ 
    $.data(this, 'entersubmit', true); 
    } 
}); 

Notez également que vous n'avez pas besoin à la fois .preventDefault()etreturn false, réaccorder false appelle à la fois .preventDefault() et .stopPropagation().

+0

J'ai utilisé e.quand pour commencer, mais en quelque sorte les touches fléchées retourné comme 0 (zéro)!? – Phliplip

+0

@Phliplip - très étrange, quel navigateur? –

Questions connexes