Set TAB key behavior - Avascript

Asked

Viewed 127 times

0

I don’t have any Javascript and I need a little help from the community. I don’t even know if what I’m going to ask for is possible, but here’s the thing: As shown below, I need a function that, assuming the cursor is in the field identified with the number 1, when successively typing the TAB, when hitting the button identified with the number 8, in the next TAB, returns to the field of number 1, instead of continuing to the other fields and buttons of the page (identified by number 9 onwards):

inserir a descrição da imagem aqui

There goes the html code generated via php based on database data, so the "id" of some inputs may not seem logical, but anyway, it’s also for example (maybe the css formatting doesn’t take this code, but it’s not important):

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exemplo</title>
  <link href="./PREGÃO WEB - MUNICÍPIO DE GUARAPUAVA - Pregão20_2020_files/bootstrap.min.css" rel="stylesheet">
  <link rel="icon" href="http://info.guarapuava.pr.gov.br/pregao/img/index.ico" type="image/x-icon">
  <link rel="shortcut icon" href="http://info.guarapuava.pr.gov.br/pregao/img/index.ico" type="image/x-icon">

</head>

<body class="container">
  <script src="./PREGÃO WEB - MUNICÍPIO DE GUARAPUAVA - Pregão20_2020_files/jquery.min.js.download"></script>
  <script src="./PREGÃO WEB - MUNICÍPIO DE GUARAPUAVA - Pregão20_2020_files/bootstrap.min.js.download"></script>
  <script type="text/javascript">
    function declinaProposta(indice) {

      document.getElementById("tdOferta" + indice).className = "text-center danger";

      //alert("declina");
    }
  </script>

  <div>
    <legend class="text-uppercase"><strong>Página exemplo</strong><br>AQUISIÇÃO DE MATERIAIS ESPORTIVOS, COM RECURSOS ORIUNDOS DA LEI N.º 2933/2019. SECRETARIA MUNICIPAL DE ESPORTES E RECREAçãO</legend>
    <form action="http://info.guarapuava.pr.gov.br/pregao/index.php" method="post">
      <input type="hidden" name="form" value="c-4">
      <legend>Disputa por Lances</legend>
      <div class="row">
        <div class="form-group">
          <div class="col-lg-9">
            <select name="nrLoteItem" class="form-control">
              <optgroup label="Não Disputados"></optgroup>
              <optgroup label="Disputados">
                <option value="1.1" selected="selected">Lote 1 - Item 1 - TATAME, 1X1, 40MM EM E.V.A. MONOCOLOR, 1ª LINHA, DUPLA FACE</option>
                <option value="2.1">Lote 2 - Item 1 - DARDOS DE BAMBU PARA ATLETISMO - - DARDO DE BAMBU PARA ATL</option>
                <option value="3.1">Lote 3 - Item 1 - BOLA DE HANDEBOL - - BOLA DE HANDEBOL H1 – PRODUZIDA EM </option>
                <option value="4.1">Lote 4 - Item 1 - BOLA DE HANDEBOL FEMININO H2L, CONFECCIONADA EM PU, TAMANHO </option>
                <option value="5.1">Lote 5 - Item 1 - BOLA DE HANDEBOL SUÉCIA H3L MASCULINA, CONFECCIONADA EM PU,</option>
                <option value="6.1">Lote 6 - Item 1 - BOLA DE VOLEIBOL OFICIAL - - BOLA VÔLEI 8.0 PRO IX DESENV</option>
              </optgroup>
              <optgroup label="Frustrados"></optgroup>
              <optgroup label="Desertos"></optgroup>
              <optgroup label="Cancelados"></optgroup>
            </select>
          </div>
          <div class="col-lg-3">
            <button type="submit" name="Operacao" value="1" class="form-control btn btn-primary">Carregar Lote para Disputa</button>
          </div>
        </div>
      </div>
    </form>
  </div><br>
  <div>
    <table class="table table-bordered table-condensed">
      <thead>
        <tr>
          <th class="text-center">Licitante</th>
          <th class="text-center">MPE</th>
          <th class="text-center">Âmbito</th>
          <th class="text-center">%</th>
          <th class="text-center">Proposta</th>
          <th colspan="2" class="text-center">Oferta</th>
        </tr>
      </thead>
      <tbody>
        <form action="http://info.guarapuava.pr.gov.br/pregao/index.php" method="post"></form>
        <input type="hidden" name="form" value="c-4">
        <input type="hidden" name="nrLote" value="1">
        <input type="hidden" name="nrItem" value="1">
        <tr class="dangero">
          <td><input type="hidden" name="Lance[0][nrDocumentoLicitante]" value="33361168000181">
            C R ROSOLEN &amp; CIA LTDA</td>
          <td width="30px" class="text-center">Sim</td>
          <td width="30px" class="text-center">Fora</td>
          <td width="30px" class="text-center">72,62</td>
          <td width="30px" class="text-center"><input type="hidden" name="Lance[0][vlProposta]" value="145.00">
            145,00</td>
          <td width="30px" id="tdOferta0" name="tdOferta0" class="text-center"><input type="number" name="Lance[0][vlOferta]" style="width:80px;" step="0.01"></td>
          <td width="30px" class="text-center"><button type="button" class="btn btn-default form-control" style="padding-top: 0px; padding-bottom: 0px; height: 26px;" onclick="declinaProposta(0)">Declinar</button></td>
        </tr>
        <tr>
          <td><input type="hidden" name="Lance[1][nrDocumentoLicitante]" value="30926482000176">
            SERGIO LUIZ DA CRUZ ARTIGOS ESPORTIVOS</td>
          <td width="30px" class="text-center">Sim</td>
          <td width="30px" class="text-center">Local</td>
          <td width="30px" class="text-center">64,83</td>
          <td width="30px" class="text-center"><input type="hidden" name="Lance[1][vlProposta]" value="138.46">
            138,46</td>
          <td width="30px" id="tdOferta1" name="tdOferta1" class="text-center"><input type="number" name="Lance[1][vlOferta]" style="width:80px;" step="0.01"></td>
          <td width="30px" class="text-center"><button type="button" class="btn btn-default form-control" style="padding-top: 0px; padding-bottom: 0px; height: 26px;" onclick="declinaProposta(1)">Declinar</button></td>
        </tr>
        <tr>
          <td><input type="hidden" name="Lance[2][nrDocumentoLicitante]" value="04611754000139">
            SUPERBALL SPORTS MATERIAL ESPORTIVO LTDA</td>
          <td width="30px" class="text-center">Sim</td>
          <td width="30px" class="text-center">Fora</td>
          <td width="30px" class="text-center">7,14</td>
          <td width="30px" class="text-center"><input type="hidden" name="Lance[2][vlProposta]" value="90.00">
            90,00</td>
          <td width="30px" id="tdOferta2" name="tdOferta2" class="text-center"><input type="number" name="Lance[2][vlOferta]" style="width:80px;" step="0.01"></td>
          <td width="30px" class="text-center"><button type="button" class="btn btn-default form-control" style="padding-top: 0px; padding-bottom: 0px; height: 26px;" onclick="declinaProposta(2)">Declinar</button></td>
        </tr>
        <tr>
          <td><input type="hidden" name="Lance[3][nrDocumentoLicitante]" value="28248986000132">
            TIAGO DANIEL VEDAN</td>
          <td width="30px" class="text-center">Sim</td>
          <td width="30px" class="text-center">Fora</td>
          <td width="30px" class="text-center">0,00</td>
          <td width="30px" class="text-center"><input type="hidden" name="Lance[3][vlProposta]" value="84.00">
            84,00</td>
          <td width="30px" id="tdOferta3" name="tdOferta3" class="text-center"><input type="number" name="Lance[3][vlOferta]" style="width:80px;" step="0.01"></td>
          <td width="30px" class="text-center"><button type="button" class="btn btn-default form-control" style="padding-top: 0px; padding-bottom: 0px; height: 26px;" onclick="declinaProposta(3)">Declinar</button></td>
        </tr>
        <tr>
          <td class="text-center"><button type="submit" name="Operacao" value="7" class="btn btn-default">Reiniciar Lances</button></td>
          <td colspan="6" class="text-right"><button type="submit" name="Operacao" value="2" class="btn btn-success">Gravar Lances</button></td>
        </tr>

      </tbody>

    </table>
  </div>
</body>

</html>
javascript html

1 answer

1

You can use the attribute tabindex, that defines the focus sequence on a page. See an example:

input {
  display: block;
}
<input tabindex="1" />
<input tabindex="3" />
<input tabindex="5" />
<input tabindex="7" />
<input tabindex="8" />
<input tabindex="6" />
<input tabindex="4" />
<input tabindex="2" />

  • At first I had accepted it as the perfect solution. however, when the cursor reaches the last input it goes through the rest of the page, not returning to the first, as requested. But it was useful to talk to a friend, he said, that when reaching the last one, you can use onblur to select the next field by tabindex=1 by javascript

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.