Aktivierung des nächsten Eingabefeldes im Formular unter Eingabe

Das Bestellformular enthält Spalten mit Produktcode und Menge in mehreren Zeilen und Löschtaste (-) am Ende jeder Zeile. Es enthält auch hinzufügen Schaltfläche in der ersten Spalte und nach dem Formular.Aktivierung des nächsten Eingabefeldes im Formular unter Eingabe

Durch Drücken der Eingabetaste wird der Fokus auf den nächsten Text oder ein numerisches Eingabefeld (Produktcode oder -menge) gesetzt, wobei die Tasten übersprungen werden.

Ich versuchte Code unten verwendet wird, aber Enter-Taste wird ignoriert.

Der Chrome-Debugger zeigt, dass die Zeile $(this).next('input').focus() ausgeführt wird, aber focus() hat keinen Effekt.

jquery, jquery-mobile sind ASP.NET MVC4

<!DOCTYPE html> 
<html> 
<head> 
    <script src="/Scripts/jquery/jquery-1.9.1.js"></script> 
</head> 
<body> 
    <div data-role="page" data-theme="a"> 
<div data-role="content"> 
<script> 
    $(function() { 
    $('#inputform').on('keydown', 'input', function (event) { 
     if (event.which == 13) { 
     $(this).next('input').focus(); 
     event.preventDefault(); 
     } 
    }); 
    }); 
</script> 
<form id='inputform' method="post" 
    action ="/Detail/SaveFullDocument?_entity=DokG&amp;_id=0"> 
    <fieldset> 
<div class='form-field' > 
<label class='form-label' for='Tasudok'>Order number</label> 
<input class='ui-widget-content ui-corner-all form-fullwidth' id='Tasudok' name='Tasudok' value='' maxlength='25' /></div> 

    <input type="hidden" name="_rows" /> 

    <table id="tableId"> 
    <tr> 
     <th>Product code</th> 
     <th>Quantity</th> 
     <td> 
     <input type="button" value="+" onclick="addRow('tableId')" /></td> 
    </tr> 

    <tr> 
     <td> 
     <input type="text" name="Toode" /></td> 
     <td> 
     <input type="number" name="Kogus" /></td> 
     <td> 
     <input type="button" value="-" onclick="deleteRow(this)" /></td> 
    </tr> 
    </table> 

    <input type="button" value="+" onclick="addRow('tableId')" /> 
    <input type="submit" value='Save order' /> 
</form> 

    </div> 
    </div> 
</body> 
</html>

Quelle

2013-10-26 Andrus

Das Problem ist, verwendet, dass die nächste Eingabe ist manchmal eine Taste. Hier ist ein JS Fiddle mit einer möglichen Lösung:

http://jsfiddle.net/hxZSU/1/

Ich habe ein Datenattribut zu den HTML-Elementen hinzugefügt, die Eingaben für den Benutzer sind. Das Attribut enthält außerdem einen Inkrementierungsindex, mit dem Sie die Reihenfolge der Elemente steuern können, die den Fokus erhalten.

Hier sind die HTML-Änderungen:

<input class='ui-widget-content ui-corner-all form-fullwidth' data-index="1" id='Tasudok' name='Tasudok' value='' maxlength='25' /> 
<input type="text" name="Toode" class="my-input" data-index="2" /> 
<input type="number" name="Kogus" data-index="3" />

Hier ist das neue JavaScript-Ereignis ist, das zwischen den Eingabefeldern bewegen. Er bestimmt den Index des Elements, das gerade bearbeitet wird, indem er $ (event.target) .attr ('datenindex') verwendet. Es erhöht den Index und wählt das nächste Element aus.

$('#inputform').on('keydown', 'input', function (event) { 
    if (event.which == 13) { 
     event.preventDefault(); 
     var $this = $(event.target); 
     var index = parseFloat($this.attr('data-index')); 
     $('[data-index="' + (index + 1).toString() + '"]').focus(); 
    } 
});

Quelle

2013-10-26 19:26:26 Sam

Funktioniert nicht auf iOS ... – tylerl

Aktivierung des nächsten Eingabefeldes im Formular unter Eingabe

Antwort

Verwandte Themen