Ändern Eingabe von Einreichung auf Tab?

Question

Benutzer mögen nicht die Tatsache, dass die Eingabetaste die Seite übermittelt. So habe ich die Aufgabe, die Einreichung zu verhindern und die Enter-Taste in ein Tab zum nächsten Feld zu ändern.

Ich habe viele JavaScript-Snippets im Netz gefunden, aber bisher hat noch keiner gearbeitet. Die einzige, die sogar einen Effekt hatte, war e.preventDefault() der jQuery-API, die die Übertragung stoppt, aber nichts, was ich versucht habe, emuliert das Verhalten der Registerkarte.

e.returnValue = false; 
e.cancel = true; 

Die Seite wird noch mit dem oben genannten Ereignis im Handler für die Ereignissteuerung übergeben. Gleicher Effekt mit return false in der Keydown Event-Handler. Der Hundeführer feuert, getestet, indem er einen Feuerstopp mit Feuerwanze macht.

Dies muss mit IE und Firefox arbeiten.

Sagen Sie nicht "Tu das nicht".
1) Ich bin bereits überzeugt, dass ich es nicht tun sollte, aber es ist keine Wahl, die mir gehört, also ist die Diskussion stumm.
2) Es wäre eine Antwort auf die Frage "Soll ich das tun?", Was nicht die Frage ist, die ich stelle.

Answer 1

Das fühlt sich einfach eklig, aber man konnte event.preventDefault verwenden, wie Sie erwähnten und dann focus() am nächsten am nächsten Eingang nennen:

Hier ist ein einfaches Beispiel:

$("input").bind("keydown", function(event) { 
    if (event.which === 13) { 
     event.stopPropagation(); 
     event.preventDefault(); 
     $(this).next("input").focus(); 
    } 
}); 

Beispiel: http://jsfiddle.net/andrewwhitaker/Txg65/

Update: Wenn Sie Elemente zwischen Ihren Eingaben haben, funktioniert die Verwendung der einfachen next() nicht. Verwenden Sie stattdessen nextAll():

$("input").bind("keydown", function(event) { 
    if (event.which === 13) { 
     event.stopPropagation(); 
     event.preventDefault(); 
     $(this).nextAll("input").eq(0).focus(); 
    } 
}); 

http://jsfiddle.net/andrewwhitaker/GRtQY/

Answer 2

$("input").bind("keydown", function(event) { 

    if (event.which === 13 && this.type !== 'submit') { 
     event.preventDefault(); 
     $(this).next("input").focus(); 
    } 
}); 

Answer 3

Basierend auf diesen Beitrag: http://forum.jquery.com/topic/how-to-find-next-node-in-focus-order

ich mit diesem kam. Ich habe mich schließlich dafür entschieden, keine Focasables zu verwenden und stattdessen Input zu verwenden, um den gewünschten Effekt zu erzielen. Die .not soll verhindern, dass Bildschaltflächen und Sendeschaltflächen beeinflusst werden, so dass sie immer noch die Standardaktion "Senden bei Eingabe" haben, wenn sie den Fokus haben.

$(document).ready(function() { 
var focusables = $(":input").not('[type="image"]').not('[type="submit"]'); 

    focusables.keydown(function(e) { 
    if (e.keyCode == 13) { 
     e.preventDefault(); 
     var current = focusables.index(this), 
       next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0); 
     next.focus(); 
    } 
    }); 
});