Attivazione del campo di inserimento successivo nel modulo immettendo

Il modulo di inserimento ordine contiene le colonne codice prodotto e quantità in più righe e il pulsante Elimina (-) alla fine di ogni riga. Contiene anche il pulsante aggiungi nella prima colonna e dopo il modulo.Attivazione del campo di inserimento successivo nel modulo immettendo

Premere il tasto Invio per impostare lo stato attivo sul campo di immissione testo o numerica successivo (codice prodotto o quantità), saltare i pulsanti.

Ho provato il codice seguente viene utilizzato ma il tasto invio viene ignorato.

Il debugger di Chrome mostra che la riga $(this).next('input').focus() viene eseguita ma la chiamata a focus() non ha alcun effetto.

jquery, jquery-mobile, ASP.NET MVC4 sono utilizzati

<!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>

fonte

2013-10-26 Andrus

Il problema è che l'ingresso successivo è talvolta un pulsante. Ecco un JS Fiddle con una possibile soluzione:

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

ho aggiunto un attributo di dati agli elementi HTML che sono gli ingressi per l'utente. L'attributo contiene inoltre un indice incrementale in modo da poter controllare l'ordine degli elementi che ricevono il focus.

Ecco le modifiche HTML:

<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" />

Ecco il nuovo evento JavaScript che si muoverà tra i campi di input. Determina l'indice dell'elemento attualmente in fase di modifica usando $ (event.target) .attr ('data-index'). Aumenta l'indice e seleziona l'elemento successivo usando questo.

$('#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(); 
    } 
});

fonte

2013-10-26 19:26:26 Sam

Non funziona su iOS ... – tylerl

Attivazione del campo di inserimento successivo nel modulo immettendo

risposta

Problemi correlati