it-swarm.com.de

jquery, wie man den eingabeschlüssel abfängt und das ereignis in einen tab ändert

Ich möchte eine Jquery-Lösung, ich muss nahe sein, was muss getan werden?

$('html').bind('keypress', function(e)
{
     if(e.keyCode == 13)
     {
         return e.keyCode = 9; //set event key to tab
     }
});

Ich kann false zurückgeben und verhindert, dass die Eingabetaste gedrückt wird. Ich dachte, ich könnte einfach den Schlüsselcode in 9 ändern, um die Registerkarte zu aktivieren, aber es scheint nicht zu funktionieren. Ich muss nah dran sein, was ist los?

66
payling

Hier ist eine Lösung:

$('input').on("keypress", function(e) {
            /* ENTER PRESSED*/
            if (e.keyCode == 13) {
                /* FOCUS ELEMENT */
                var inputs = $(this).parents("form").eq(0).find(":input");
                var idx = inputs.index(this);

                if (idx == inputs.length - 1) {
                    inputs[0].select()
                } else {
                    inputs[idx + 1].focus(); //  handles submit buttons
                    inputs[idx + 1].select();
                }
                return false;
            }
        });
64
Sarfraz

Das funktioniert perfekt!

 $('input').keydown( function(e) {
        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
        if(key == 13) {
            e.preventDefault();
            var inputs = $(this).closest('form').find(':input:visible');
            inputs.eq( inputs.index(this)+ 1 ).focus();
        }
    });
31
Bharat

Warum nicht so einfach?

$(document).on('keypress', 'input', function(e) {

  if(e.keyCode == 13 && e.target.type !== 'submit') {
    e.preventDefault();
    return $(e.target).blur().focus();
  }

});

Auf diese Weise lösen Sie das Senden nicht aus, es sei denn, Sie konzentrieren sich bereits auf den Eingabetyp "Senden", und Sie befinden sich genau dort, wo Sie aufgehört haben. Dies macht es auch für Eingaben möglich, die dynamisch zur Seite hinzugefügt werden.

Hinweis: Die Unschärfe () befindet sich vor dem Fokus () für alle, die möglicherweise Ereignis-Listener "auf Unschärfe" haben. Der Prozess muss nicht funktionieren.

8
rpearce

PlusAsTab : Ein jQuery-Plugin, das die Numpad-Plus-Taste als Äquivalent der Tabulatortaste verwendet.

PlusAsTab kann auch konfiguriert werden, um die Eingabetaste wie in dieser Demo zu verwenden. Siehe einige meinerälteren Antwortenzu dieser Frage .

In Ihrem Fall ersetzen Sie die Eingabetaste durch die Registerkartenfunktion für die gesamte Seite (nachdem Sie die Eingabetaste als Registerkarte in den Optionen festgelegt haben).

<body data-plus-as-tab="true">
    ...
</body>
7
Joel Purra

Das Erstellen von Bens Plugin für diese Version behandelt select und Sie können eine Option an allowSubmit übergeben. dh. $("#form").enterAsTab({ 'allowSubmit': true}); Dies ermöglicht es enter, das Formular zu senden, wenn die Schaltfläche "Senden" das Ereignis verarbeitet.

(function( $ ){
    $.fn.enterAsTab = function( options ) {  
    var settings = $.extend( {
       'allowSubmit': false
    }, options);
    this.find('input, select').live("keypress", {localSettings: settings}, function(event) {
        if (settings.allowSubmit) {
        var type = $(this).attr("type");
        if (type == "submit") {
            return true;
        } 
    }
    if (event.keyCode == 13 ) {
        var inputs =   $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])");
        var idx = inputs.index(this);
        if (idx == inputs.length - 1) {
           idx = -1;
       } else {
           inputs[idx + 1].focus(); // handles submit buttons
      }
        try {
            inputs[idx + 1].select();
            }
        catch(err) {
            // handle objects not offering select
            }
        return false;
    }
});
  return this;
};
})( jQuery );
5
Manuel Guzman

Das ist endlich was für mich perfekt funktioniert. Ich verwende jqeasyui und es funktioniert gut

$(document).on('keyup', 'input', function(e) {
 if(e.keyCode == 13 && e.target.type        !== 'submit') {
   var inputs =   $(e.target).parents("form").eq(0).find(":input:visible"),
   idx = inputs.index(e.target);
       if (idx == inputs.length - 1) {
          inputs[0].select()
       } else {
          inputs[idx + 1].focus();
          inputs[idx + 1].select();
       }
 }

});
4
Metin

Schließt alle Arten von Eingaben ein

$(':input').keydown(function (e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    if (key == 13) {
        e.preventDefault();
        var inputs = $(this).closest('form').find(':input:visible:enabled');
        if ((inputs.length-1) == inputs.index(this))
            $(':input:enabled:visible:first').focus();
        else
            inputs.eq(inputs.index(this) + 1).focus();
    }
});
3
pmereles

Ich habe den Code aus der akzeptierten Antwort als jQuery-Plugin geschrieben, was ich für nützlicher halte. (Außerdem werden jetzt ausgeblendete, deaktivierte und schreibgeschützte Formularelemente ignoriert.) 

$.fn.enterAsTab = function () {
  $(this).find('input').live("keypress", function(e) {
    /* ENTER PRESSED*/
    if (e.keyCode == 13) {
        /* FOCUS ELEMENT */
        var inputs =   $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"),
            idx = inputs.index(this);

        if (idx == inputs.length - 1) {
            inputs[0].select()
        } else {
            inputs[idx + 1].focus(); // handles submit buttons
            inputs[idx + 1].select();
        }
        return false;
    }
  });
  return this;
};

Auf diese Weise kann ich $ ('# form-id') ausführen. EnterAsTab (); ... Ich dachte, ich würde hier posten, da es noch niemand als $ plugin gepostet hat und sie nicht ganz intuitiv schreiben können.

3
Ben Roberts

Ich habe das Beste aus dem oben Genannten genommen und die Möglichkeit hinzugefügt, mit allen Eingaben, außerhalb von Formularen usw. zu arbeiten. Außerdem wird die Schleife ordnungsgemäß zurückgesetzt, um jetzt zu beginnen, wenn Sie die letzte Eingabe erreichen. Bei nur einem Eingang wird die Unschärfe unscharf und der einzelne Eingang wird neu fokussiert, um externe Unschärfefunktionen zu aktivieren.

$('input,select').keydown( function(e) {
  var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  if(key == 13) {
    e.preventDefault();
    var inputs = $('#content').find(':input:visible');
    var nextinput = 0;
    if (inputs.index(this) < (inputs.length-1)) {
      nextinput = inputs.index(this)+1;
    }
    if (inputs.length==1) {
      $(this).blur().focus();
    } else {
      inputs.eq(nextinput).focus();
    }
  }
});
2
TSG

Folgendes habe ich verwendet:

$("[tabindex]").addClass("TabOnEnter");
$(document).on("keypress", ".TabOnEnter", function (e) {
 //Only do something when the user presses enter
     if (e.keyCode == 13) {
          var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
          console.log(this, nextElement);
           if (nextElement.length)
                nextElement.focus()
           else
                $('[tabindex="1"]').focus();
      }
});

Beachtet, dass tabindex und nicht spezifisch für das Formular ist, sondern für die gesamte Seite.  

Hinweis live wurde von jQuery überholt, jetzt sollten Sie on verwenden.

2
Kamran Ahmed

Dies ist meine Lösung, Feedback ist willkommen .. :)

$('input').keydown( function (event) { //event==Keyevent
    if(event.which == 13) {
        var inputs = $(this).closest('form').find(':input:visible');
        inputs.eq( inputs.index(this)+ 1 ).focus();
        event.preventDefault(); //Disable standard Enterkey action
    }
    // event.preventDefault(); <- Disable all keys  action
});
2
Nick Ma.

Diese Lösungen funktionierten nicht mit meinem Datagrid. Ich hatte gehofft, dass sie es tun würden. Ich brauche nicht wirklich Tab oder Enter, um zur nächsten Eingabe, Spalte, Zeile oder was auch immer zu gelangen. Ich brauche nur Enter, um .focusout oder .change auszulösen, und mein DataGrid aktualisiert die Datenbank. Also habe ich die "Enter" -Klasse zu den relevanten Texteingaben hinzugefügt und dies hat den Trick für mich gemacht:

$(function() {
   if ($.browser.mozilla) {
        $(".enter").keypress(checkForEnter);
    } else {
        $(".enter").keydown(checkForEnter);
    }
});

function checkForEnter(event) {
    if (event.keyCode == 13) {
        $(".enter").blur();
    }
}
1
PJ Brunet

Ich weiß, dass diese Frage älter ist als Gott, aber ich habe noch nie eine so elegante Antwort gesehen.

doc.on('keydown', 'input', function(e, ui) {
    if(e.keyCode === 13){
        e.preventDefault();
        $(this).nextAll('input:visible').eq(0).focus();
    }
});

das scheint die Arbeit in so wenigen Zeilen wie möglich zu erledigen.

0
user1119648

Ich hatte die gleiche Anforderung in meiner Entwicklung, also forschte ich darüber. Ich habe in den letzten zwei Tagen viele Artikel gelesen und viele Lösungen wie jQuery.tabNext () plugin ausprobiert.

Ich hatte einige Probleme mit IE11 (alle IE - Version hat diesen Fehler). Bei einem Eingabetext gefolgt von einer Nicht-Texteingabe wurde die Auswahl nicht gelöscht. Also habe ich meine eigene tabNext () -Methode basierend auf dem Lösungsvorschlag von @Sarfraz erstellt. Ich habe auch darüber nachgedacht, wie es sich verhalten soll (nur Kreis in der aktuellen Form oder vielleicht durch das gesamte Dokument). Ich habe mich immer noch nicht um die tabindex-Eigenschaft gekümmert, weil ich sie gelegentlich benutze. Aber ich werde es nicht vergessen.

Damit mein Beitrag für jedermann leicht von Nutzen sein kann, habe ich hier ein jsfiddle-Beispiel erstellt https://jsfiddle.net/mkrivan/hohx4nes/

Ich füge auch den JavaScript-Teil des Beispiels hier ein:

            function clearSelection() {
            if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox)
                document.getSelection().removeAllRanges();
                document.getSelection().addRange(document.createRange());
                console.log("document.getSelection");
            } else if (window.getSelection) { // equals with the document.getSelection (MSDN info)
                if (window.getSelection().removeAllRanges) {  // for all new browsers (IE9+, Chrome, Firefox)
                    window.getSelection().removeAllRanges();
                    window.getSelection().addRange(document.createRange());
                    console.log("window.getSelection.removeAllRanges");
                } else if (window.getSelection().empty) {  // maybe for old Chrome
                    window.getSelection().empty();
                    console.log("window.getSelection.empty");
                }
            } else if (document.selection) {  // IE8- deprecated
                document.selection.empty();
                console.log("document.selection.empty");
            }
        }
        function focusNextInputElement(node) { // instead of jQuery.tabNext();
            // TODO: take the tabindex into account if defined
            if (node !== null) {
                // stay in the current form
                var inputs = $(node).parents("form").eq(0).find(":input:visible:not([disabled]):not([readonly])");
                // if you want through the full document (as TAB key is working)
                // var inputs = $(document).find(":input:visible:not([disabled]):not([readonly])");
                var idx = inputs.index(node) + 1; // next input element index
                if (idx === inputs.length) { // at the end start with the first one
                    idx = 0;
                }
                var nextInputElement = inputs[idx];
                nextInputElement.focus(); //  handles submit buttons
                try { // if next input element does not support select()
                    nextInputElement.select();
                } catch (e) {
                }
            }
        }
        function tabNext() {
            var currentActiveNode = document.activeElement;
            clearSelection();
            focusNextInputElement(currentActiveNode);
        }
        function stopReturnKey(e) {
            var e = (e) ? e : ((event) ? event : null);
            if (e !== null) {
                var node = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
                if (node !== null) {
                    var requiredNode = $(node).is(':input')
                            // && !$(node).is(':input[button]')
                            // && !$(node).is(':input[type="submit"]')
                            && !$(node).is('textarea');
                    // console.log('event key code ' + e.keyCode + '; required node ' + requiredNode);
                    if ((e.keyCode === 13) && requiredNode) {
                        try {
                            tabNext();
                            // clearSelection();
                            // focusNextInputElement(node);
                            // jQuery.tabNext();
                            console.log("success");
                        } catch (e) {
                            console.log("error");
                        }
                        return false;
                    }
                }
            }
        }
        document.onkeydown = stopReturnKey;

Ich habe auch kommentierte Zeilen hinterlassen, so dass mein Denken verfolgt werden kann.

0
Miklos Krivan

Ich weiß, dass dies ziemlich alt ist, aber ich suchte nach der gleichen Antwort und stellte fest, dass die gewählte Lösung nicht dem tabIndex entsprach. Ich habe es daher folgendermaßen geändert, was für mich funktioniert. Bitte beachten Sie, dass maxTabNumber eine globale Variable ist, die die maximale Anzahl von tabellierbaren Eingabefeldern enthält

  $('input').on("keypress", function (e) {
                if (e.keyCode == 13) {
                    var inputs = $(this).parents("form").eq(0).find(":input");
                    var idx = inputs.index(this);

                    var tabIndex = parseInt($(this).attr("tabindex"));
                    tabIndex = (tabIndex + 1) % (maxTabNumber + 1);
                    if (tabIndex == 0) { tabIndex = 1; }
                    $('[tabindex=' + tabIndex + ']').focus();
                    $('[tabindex=' + tabIndex + ']').select();
          
                    return false;
                }
    });

0
Claus Behn

sie sollten alle deaktivierten und readonly-Elemente filtern ... Ich denke, dieser Code sollte keine Schaltflächen enthalten

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

    if (e.keyCode == 13 && !submit) {
        focusable = form.find('input,a,select,button,textarea').filter(':visible:not([readonly]):not([disabled])');
        next = focusable.eq(focusable.index(this)+1);

        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }

        return false;
    }
});
0
$('input').live("keypress", function(e) {
            /* ENTER PRESSED*/
            if (e.keyCode == 13) {
                /* FOCUS ELEMENT */
                var inputs = $(this).parents("form").eq(0).find(":input:visible");
                var idx = inputs.index(this);

                if (idx == inputs.length - 1) {
                    inputs[0].select()
                } else {
                    inputs[idx + 1].focus(); //  handles submit buttons
                    inputs[idx + 1].select();
                }
                return false;
            }
        });

sichtbare Eingaben können nicht fokussiert werden.

0
ldp615

Hier ist ein von mir geschriebenes jQuery-Plugin, das die Eingabetaste als Rückruf oder als Tabulatortaste (mit optionalem Rückruf) behandelt:

$(document).ready(function() {
  $('#one').onEnter('tab');
  $('#two').onEnter('tab');
  $('#three').onEnter('tab');
  $('#four').onEnter('tab');
  $('#five').onEnter('tab');
});

/**
 * jQuery.onEnter.js
 * Written by: Jay Simons
 * Cloudulus.Media (https://code.cloudulus.media)
 */

if (window.jQuery) {
    (function ($) {
        $.fn.onEnter = function (opt1, opt2, opt3) {
            return this.on('keyup', function (e) {
                var me = $(this);
                var code = e.keyCode ? e.keyCode : e.which;
                if (code == 13) {
                    if (typeof opt1 == 'function')
                    {
                        opt1(me, opt2);
                        return true;
                    }else if (opt1 == 'tab')
                    {
                        var eles = $(document).find('input,select,textarea,button').filter(':visible:not(:disabled):not([readonly])');
                        var foundMe = false;
                        var next = null;
                        eles.each(function(){
                            if (!next){
                                if (foundMe) next = $(this);
                                if (JSON.stringify($(this)) == JSON.stringify(me)) foundMe = true;
                            }
                        });
                        next.focus();
                        if (typeof opt2 === 'function')
                        {
                            opt2(me, opt3);
                        }
                        return true;
                    }
                }
            }).on('keydown', function(e){
                var code = e.keyCode ? e.keyCode : e.which;
                if (code == 13)
                {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
            });
        }
    })(jQuery);
} else {
    console.log("onEnter.js: This class requies jQuery > v3!");
}
input,
select,
textarea,
button {
  display: block;
  margin-bottom: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input id="one" type="text" placeholder="Input 1" />
  <input id="two" type="text" placeholder="Input 2" />

  <select id="four">
    <option selected>A Select Box</option>
    <option>Opt 1</option>
    <option>Opt 2</option>
  </select>
  <textarea id="five" placeholder="A textarea"></textarea>
  <input id="three" type="text" placeholder="Input 3" />
  <button>A Button</button>
</form>
0
Jay