webentwicklung-frage-antwort-db.com.de

Wie kann der Fokus auf das nächste Feld verschoben werden, wenn die Eingabetaste gedrückt wird?

Können Sie mir bitte sagen, wie ich den Fokus auf das nächste Feld verschieben kann, wenn die Eingabetaste gedrückt wird? Ich verwende das dform-Plugin (das JSON in ein Formular konvertiert). 

Ich habe es gegoogelt, aber das funktioniert nicht. Warum wird mein Fokus nicht auf das nächste Feld gerichtet?

JSFiddle: http://jsfiddle.net/5WkVW/1/

$(document).keypress(function(e) {
    if(e.which == 13) {

            // Do something here if the popup is open
            alert("dd")
            var index = $('.ui-dform-text').index(this) + 1;
            $('.ui-dform-text').eq(index).focus();

    }
});

* Anmerkung (aus Kommentaren): Es muss auch auf Seiten arbeiten, für die keine tabindex-Werte festgelegt sind.

11
Shruti

Es schlägt fehl, weil this die document in Ihrem Code ist.

Sie möchten den Index des aktuell fokussierten Elements (document.activeElement) verwenden. Wenn Sie delegierte Ereignisse verwenden, können Sie sicherstellen, dass this das aktuelle Element ist.

Diese endgültige Version funktioniert unabhängig davon, ob es tabindexes gibt oder nicht. Es wickelt sich auch um:

JSFiddle 1: http://jsfiddle.net/TrueBlueAussie/5WkVW/11/

JSFiddle 2: http://jsfiddle.net/TrueBlueAussie/5WkVW/12/

Beide verwenden einen benutzerdefinierten jQuery-Selector, den ich mit dem Namen :focusable hinzufüge, um alle fokussierbaren Elemente (einschließlich Links) auszuwählen:

// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input, [tabindex]');
    }
});

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        // Get all focusable elements on the page
        var $canfocus = $(':focusable');
        var index = $canfocus.index(this) + 1;
        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }
});

Sie können denselben benutzerdefinierten Selektor im Ereignishandler verwenden, wenn Sie möchten. Dann funktioniert es sogar mit Anker-Links (, wenn Sie das Ereignis in keydown statt keypress ändern):

z.B.

$(document).on('keydown', ':focusable', function (e) {

Beispiel mit Link: http://jsfiddle.net/5WkVW/15/

Dies verwendet auch eine delegierte on, die auf das keydown-Ereignis der document wartet. It then wendet den jQuery-Selektor an, then wendet die Funktion auf jedes übereinstimmende Element an, das das Ereignis ausgelöst hat. Dies ist viel effizienter, da der Selektor nur zum Zeitpunkt des Ereignisses angewendet wird (anstatt mehrere Ereignisbehandlungsroutinen auf jedes DOM-Übereinstimmungselement anzuwenden).


Alte Versionen unten:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5WkVW/3/

$(document).keypress(function(e) {
    if(e.which == 13) {

            // Do something here if the popup is open
            //alert("dd")
            var index = $('.ui-dform-text').index(document.activeElement) + 1;
            $('.ui-dform-text').eq(index).focus();

    }
});

* Hinweis: alerts kann focus stören. Verwenden Sie console.log für eine solche Ausgabe und sehen Sie sich das Debug-Fenster der meisten Browser an (wie die Debugging-Tools von Chrome F12).

Update: http://jsfiddle.net/TrueBlueAussie/5WkVW/4/

Dieses Element wird auf das erste Element vom letzten Element zurückgesetzt und funktioniert auch bei Auswahlmöglichkeiten (das Standardverhalten ist blockiert. Sie können also nur Leerzeichen zum Öffnen oder Aufwärts/Abwärts-Auswählen zum Auswählen von Optionen verwenden.

$('input,select').on('keypress', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
        console.log($next.length);
        if (!$next.length) {
            $next = $('[tabIndex=1]');
        }
        $next.focus();
    }
});

Angeforderte "Dokument" -Version: http://jsfiddle.net/TrueBlueAussie/5WkVW/5/

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
        console.log($next.length);
        if (!$next.length) {
            $next = $('[tabIndex=1]');
        }
        $next.focus();
    }
});
27
Gone Coding

Ich habe eine Nicht-jQuery-Version erstellt. Also nur reines Javascript; https://jsfiddle.net/mm0uctuv/2/

Javascript:

var inputs = document.querySelectorAll("input,select");
for (var i = 0 ; i < inputs.length; i++) {
   inputs[i].addEventListener("keypress", function(e){
      if (e.which == 13) {
         e.preventDefault();
         var nextInput = document.querySelectorAll('[tabIndex="' + (this.tabIndex + 1) + '"]');
         if (nextInput.length === 0) {
            nextInput = document.querySelectorAll('[tabIndex="1"]');
         }
         nextInput[0].focus();
      }
   })
}

HTML:

<form>
   Field 1: <input type="text" tabindex="1"><br>
   Field 3: <input type="text" tabindex="3"><br>
   Field 2: <input type="text" tabindex="2">
</form>
3
Ramon Bakker

Der folgende Code sollte dies tun; Es verwendet die tabIndex-Eigenschaft. Lassen Sie uns wissen, ob das nicht akzeptabel ist:

$(function() {
    $('input').on('keypress', function(e) {
        e.which !== 13 || $('[tabIndex=' + (+this.tabIndex + 1) + ']')[0].focus();
    });
});

Die Dropdown-Taste hat bereits die Eingabetaste zum Öffnen der Dropdown-Liste.

JS FIDDLE DEMO

Um etwas tun zu können, bevor Sie zum nächsten Formularelement wechseln, können Sie die folgende Version verwenden:

$(function() {
    $(document).on('keypress', function(e) {
        var that = document.activeElement;
        if( e.which == 13 ) {
            e.preventDefault();
            alert( "dd" );
            $('[tabIndex=' + (+that.tabIndex + 1) + ']')[0].focus();
        }            
    });
});

DEMO

2
PeterKA

Fügen Sie auf der obersten Ebene divonKeyDown={this.onKeyDown.bind(this)} hinzu und fügen Sie der Klasse div die folgende Methode (ES6) hinzu:

onKeyDown(event) {
    if (event.keyCode === 13) {
        event.preventDefault()
        const inputs =
            Array.prototype.slice.call(document.querySelectorAll("input"))
        const index =
            (inputs.indexOf(document.activeElement) + 1) % inputs.length
        const input = inputs[index]
        input.focus()
        input.select()
    }
}
2
Ralph

Probieren Sie den folgenden JavaScript-Code aus, den Sie in Ihrer Geige geändert haben. Das Standardverhalten der Auswahlelemente besteht darin, den Tastendruck zu erweitern. Das Pluszeichen am Anfang von + $ (this) .attr ("tabindex")

Konvertiert den Textattributwert in int.

$(".ui-dform-text").keypress(function(e) {
    if(e.which == 13) {

        // Do something here if the popup is open
        alert($(this).attr("tabindex"));
        var index = +$(this).attr("tabindex") + 1;


        $("[tabindex='" + index +"']").focus();
    }
});
0
JDTLH9