Entrez la clé de la presse se comporte comme un Onglet en Javascript

Question

Entrez la clé de la presse se comporte comme un Onglet en Javascript

Demandé el 17 de Juin, 2009: Quand la question a-t-elle été
33221 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je cherche à créer un formulaire en appuyant sur la touche entrée causes concentrer pour aller à la "prochaine" d'élément de formulaire sur la page. La solution que j'ai trouve sur le web est...

 <body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">

Malheureusement, cela ne semble que le travail dans IE. Donc, la vraie viande de cette question est si quelqu'un connaît une solution qui fonctionne pour FF et Chrome? En outre, je préfèrerais ne pas avoir à ajouter de l' onkeydown événements à la forme des éléments eux-mêmes, mais si c'est la seule façon, il aura à faire.

Ce problème est similaire à la question 905222, mais digne de sa propre question, à mon avis.

Edit: aussi, j'ai vu des gens poser la question que ce n'est pas de bon style, comme il s'écarte de la forme de comportement que les utilisateurs sont habitués. Je suis d'accord! C'est une demande du client :(

Demandé el 17 de Juin, 2009 par Ross

Answer 1

5 Réponses

Answer 2

92voto

tcdona Points 261

J'ai utilisé la logique proposée par Andrew qui est très efficace. Et c'est ma version:

$('body').on('keydown', 'input, select, textarea', function(e) {
    var self = $(this)
      , form = self.parents('form:eq(0)')
      , focusable
      , next
      ;
    if (e.keyCode == 13) {
        focusable = form.find('input,a,select,button,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this)+1);
        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }
        return false;
    }
});

Répondu el 26 de Août, 2012 par tcdona (261 Points )

Answer 3

11voto

Andre Van Zuydam Points 61

Merci pour le bon script.

J'ai juste ajouté le changement de l'événement sur la fonction ci-dessus pour revenir en arrière entre les éléments, je pensais que quelqu'un peut avoir besoin de cette.

$('body').on('keydown', 'input, select, textarea', function(e) {
var self = $(this)
  , form = self.parents('form:eq(0)')
  , focusable
  , next
  , prev
  ;

if (e.shiftKey) {
 if (e.keyCode == 13) {
     focusable =   form.find('input,a,select,button,textarea').filter(':visible');
     prev = focusable.eq(focusable.index(this)-1); 

     if (prev.length) {
        prev.focus();
     } else {
        form.submit();
    }
  }
}
  else
if (e.keyCode == 13) {
    focusable = form.find('input,a,select,button,textarea').filter(':visible');
    next = focusable.eq(focusable.index(this)+1);
    if (next.length) {
        next.focus();
    } else {
        form.submit();
    }
    return false;
}
});

Répondu el 20 de Novembre, 2013 par Andre Van Zuydam (61 Points )

Answer 4

4voto

Damien Sawyer Points 469

J'ai retravaillé la Fpo solution dans un knock-out de liaison et j'ai pensé le partager. Merci beaucoup :-)

Voici un Violon

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" type="text/javascript"></script>


</head>
<body>

    <div data-bind="nextFieldOnEnter:true">
        <input type="text" />
        <input type="text" />
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <input type="text" />
        <input type="text" />
    </div>


    <script type="text/javascript">
    ko.bindingHandlers.nextFieldOnEnter = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            $(element).on('keydown', 'input, select', function (e) {
                var self = $(this)
                , form = $(element)
                  , focusable
                  , next
                ;
                if (e.keyCode == 13) {
                    focusable = form.find('input,a,select,button,textarea').filter(':visible');
                    var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                    next = focusable.eq(nextIndex);
                    next.focus();
                    return false;
                }
            });
        }
    };

    ko.applyBindings({});
    </script>
</body>
</html>

Répondu el 11 de Avril, 2013 par Damien Sawyer (469 Points )

Answer 5

4voto

Andrew Points 58

Changer ce comportement crée en fait une bien meilleure expérience utilisateur que le comportement par défaut mis en œuvre de manière native. Considérer que le comportement de la touche "entrée" est déjà incohérent de l'utilisateur du point de vue, parce que dans une seule ligne de saisie, entrez tend à soumettre un formulaire, alors que dans un multi-ligne textarea, il suffit d'ajouter une nouvelle ligne pour le contenu du champ.

Récemment, j'ai fait comme ceci (utilise jQuery):

$('input.enterastab, select.enterastab, textarea.enterastab').live('keydown', function(e) {
 if (e.keyCode==13) {
  var focusable = $('input,a,select,button,textarea').filter(':visible');
  focusable.eq(focusable.index(this)+1).focus();
  return false;
 }
});

Ce n'est pas vraiment efficace, mais fonctionne assez bien et est fiable - il suffit d'ajouter le "enterastab' classe à tout élément de saisie doit se comporter de cette façon.

Répondu el 4 de Octobre, 2010 par Andrew (58 Points )

Answer 6

-2voto

Byron Whitlock Points 29863

Vous pourriez par programmation à parcourir les éléments de formulaire ajout de la onkeydown gestionnaire comme vous allez. De cette façon, vous pouvez réutiliser le code.

Répondu el 17 de Juin, 2009 par Byron Whitlock (29863 Points )

Entrez la clé de la presse se comporte comme un Onglet en Javascript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Entrez la clé de la presse se comporte comme un Onglet en Javascript

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: