Standardmäßig verwendet das System die Tabulatortaste, um den Fokus von Seitenelementen zu wechseln. Haben Sie jemals gedacht, dass die Eingabetaste diese Funktion auch erreichen und eine gute Benutzererfahrung erzielen kann? Als nächstes verwenden wir Jquery, um die Eingabetaste zum Wechseln des Fokus zu implementieren. Dieser Code wurde in den häufig verwendeten Browsern IE7, IE8, Firefox 3, Chrome 2 und Safari 4 getestet.
Das verwendete Entwicklungstool ist das Microsoft VS2010+Jquery-Framework
Die Implementierungsschritte sind wie folgt
1. Referenzieren Sie zunächst die JQuery-Klassenbibliothek
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
2. Javascript-Code
<script type="text/javascript">
$(Funktion () {
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>
analysieren :
$('input:text:first').focus();
Beim Initialisieren der Seite wird der Fokus im ersten Textfeld positioniert
var $inp = $('input:text');
Nehmen Sie die Elementsammlung „type=text box“.
$inp.bind('keydown', function (e) {}
Binden Sie das Ereignis „keydown“ an die Textfeldsammlung
var key = e.which;
Rufen Sie den aktuell gedrückten Tastenwert ab, z. B. Tastenwert eingeben = 13
e.preventDefault();
Sie können verhindern, dass das Standardverhalten auftritt und etwas anderes passiert. Hier verhindern wir, dass PostBack auftritt, und wechseln stattdessen den Fokus. Eine weitere ähnliche Methode ist stopPropagation, die verhindert, dass js-Ereignisse in die Höhe schnellen.