Follow focus sequence after reloading the page

Navigation
0

I have a page html , with several input fields, where I want to pass them in sequence using the tab key. I used tabindex="" to follow the correct sequence.
But one of these fields reloads the page to bring values from the database, according to the inserted id. I need that after reloading the page, the sequence continues from the last field where value was entered, but what is happening is that the cursor returns to the first input of the page. Does anyone know how I can resolve this problem?

Thank you!

    
asked by anonymous 18.07.2016 / 15:07

1 answer

0

You can use JS to solve your problem. It would look like this: 

            $(function(){
                //Declara variável
                var focus_ok;
                //um laço para cada elemento 'input'
                $( "input" ).each(function( index ) {
                    //se o elemento tiver algum valor pega o id dele e armazena
                    if($(this).val()) focus_ok = $(this).attr('id');
                });
                //por algum motivo tive que concatenar o # do id
                focus_ok = "#"+focus_ok;
                //aplica o focus no último id coletado
                $(focus_ok).focus();
            });
            form{max-width: 300px;padding: 15px 15px;border:3px solid #9696ff;border-radius: 3px;margin: 5px;font-size: 16px;font-family: Arial;}
            form input{display: block;margin: 5px 0px;margin-bottom: 15px;width: 100%;border: 1px solid #9696ff;padding: 5px 0px;border-radius: 1px;}
            form input:focus{box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><formaction="">
            <label for="">Input 01</label>
            <input type="text" id="input_01" value="input_01">
            <label for="">Input 02</label>
            <input type="text" id="input_02" value="input_02">
            <label for="">Input 03</label>
            <input type="text" id="input_03" value="input_03">
            <label for="">Input 04</label>
            <input type="text" id="input_04">
            <label for="">Input 05</label>
            <input type="text" id="input_05">
        </form>
    
18.07.2016 / 16:46
Receive google drive notification Laravel returns Incorrect table definition;