0

Como fazer pra em um formulário em HTML ele mude de um campo para outro posterior quando pressiona-se a tecla Enter? (Ele naturalmente muda apertando TAB).

Já existe um tópico relativo a esse assunto, porém, onde colocar o código em Javascript? É no <body> ou no <head>? Ele não tem que referenciar o <form> que contém os TextFields?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<body>
  <form id="documento" name="documento" method="post" action="inclusao.php" onsubmit="return validaCampo(); return false;">
    <table width="100%" border="0">
      <tr>
        <th colspan="2" align="center" valign="top">
          <h3>Cadastro de Documento </h3>
        </th>
      </tr>
      <tr>
        <td width="138">CPF/CNPJ:</td>
        <td width="835"><input name="CNPJ" type="text" id="CNPJ" size="20" maxlength="14" />
          <span class="style1">*</span> <span class="style3">somente n&uacute;meros</span></td>
      </tr>
      <tr>
        <td>Data Recebimento:</td>
        <td>
          <input type="text" name="DataRec" id="DataRec" size="10" maxlength="10" /> <span class="style1">*</span>
        </td>
      </tr>
      <tr>
        <td>Tipo de Documento:</td>
        <td>
          <select name="TipDoc" id="TipDoc">
            <option value="NF">NF</option>
            <option value="CTO">CTO</option>
            <option value="MTO">MTO</option>
            <option value="OUTROS">OUTROS</option>
          </select> <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>N&uacute;mero do Documento.:</td>
        <td><input type="tel" name="NumNFC" id="NumNFC" size="9" maxlength="9" /> <span class="style1">*</span></td>

      </tr>
      <tr>
        <td>Quantidade (Volume)</td>
        <td><input name="QTDVol" type="tel" id="QTDVol" size="4" maxlength="4" /> <span class="style1">*</span> <span class="style3">em litros</span></td>
      </tr>
      <tr>
        <td>Processo</td>
        <td><input name="proces" type="text" id="proces" size="14" maxlength="14" /> <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>Local de Entrega:</td>
        <td><input name="CDRDES" type="text" id="CDRDES" maxlength="15" size="15" />
          <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>Fornecedor:</td>
        <td> <input name="FORNEC" type="text" id="FORNEC" maxlength="20" size="20" /> <span class="style1">*</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p>
            <input name="cadastrar" type="submit" id="cadastrar" value="Confirmar" />
            <br />
            <input name="limpar" type="reset" id="limpar" value="Limpar Campos preenchidos!" />
            <br />
            <span class="style1">* Campos com * s&atilde;o obrigat&oacute;rios!          </span></p>
          <p>&nbsp; </p>
        </td>
      </tr>
    </table>
  </form>
</body>

2
  • 1
    Dependendo da aplicação, eu desencorajaria você a fazer isso, pois é alterar o comportamento natural da aplicação e isso pode ser esquisito para o usuário
    – Woss
    Commented 28/06/2018 às 21:42
  • Olá @dvd, o link desta outra pergunta não usa uma '<table>'. Usa o '<div>'. Colocando o mesmo código no '<body>' desse código aqui, não funciona o Enter pra mudar pro próximo '<input>'.
    – Marvin
    Commented 5/07/2018 às 14:32

2 Respostas 2

3

Pode fazer desta forma, focando o próximo campo da próxima linha da tabela (explicações no código):

$("input, select", "form") // busca input e select no form
.keypress(function(e){ // evento ao presionar uma tecla válida keypress
   
   var k = e.which || e.keyCode; // pega o código do evento
   
   if(k == 13){ // se for ENTER
      e.preventDefault(); // cancela o submit
      $(this)
      .closest('tr') // seleciona a linha atual
      .next() // seleciona a próxima linha
      .find('input, select') // busca input ou select
      .first() // seleciona o primeiro que encontrar
      .focus(); // foca no elemento
   }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="documento" name="documento" method="post" action="inclusao.php" onsubmit="return validaCampo(); return false;">
    <table width="100%" border="0">
      <tr>
        <th colspan="2" align="center" valign="top">
          <h3>Cadastro de Documento </h3>
        </th>
      </tr>
      <tr>
        <td width="138">CPF/CNPJ:</td>
        <td width="835"><input name="CNPJ" type="text" id="CNPJ" size="20" maxlength="14" />
          <span class="style1">*</span> <span class="style3">somente n&uacute;meros</span></td>
      </tr>
      <tr>
        <td>Data Recebimento:</td>
        <td>
          <input type="text" name="DataRec" id="DataRec" size="10" maxlength="10" /> <span class="style1">*</span>
        </td>
      </tr>
      <tr>
        <td>Tipo de Documento:</td>
        <td>
          <select name="TipDoc" id="TipDoc">
            <option value="NF">NF</option>
            <option value="CTO">CTO</option>
            <option value="MTO">MTO</option>
            <option value="OUTROS">OUTROS</option>
          </select> <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>N&uacute;mero do Documento.:</td>
        <td><input type="tel" name="NumNFC" id="NumNFC" size="9" maxlength="9" /> <span class="style1">*</span></td>

      </tr>
      <tr>
        <td>Quantidade (Volume)</td>
        <td><input name="QTDVol" type="tel" id="QTDVol" size="4" maxlength="4" /> <span class="style1">*</span> <span class="style3">em litros</span></td>
      </tr>
      <tr>
        <td>Processo</td>
        <td><input name="proces" type="text" id="proces" size="14" maxlength="14" /> <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>Local de Entrega:</td>
        <td><input name="CDRDES" type="text" id="CDRDES" maxlength="15" size="15" />
          <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>Fornecedor:</td>
        <td> <input name="FORNEC" type="text" id="FORNEC" maxlength="20" size="20" /> <span class="style1">*</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p>
            <input name="cadastrar" type="submit" id="cadastrar" value="Confirmar" />
            <br />
            <input name="limpar" type="reset" id="limpar" value="Limpar Campos preenchidos!" />
            <br />
            <span class="style1">* Campos com * s&atilde;o obrigat&oacute;rios!          </span></p>
          <p>&nbsp; </p>
        </td>
      </tr>
    </table>
  </form>

5
  • Olá. Como você fez pra que ele não entendesse como submit com o Enter (pois ainda está entendendo como submit)? Onde é o local que você colocou a primeira parte do código?
    – Marvin
    Commented 9/07/2018 às 19:48
  • Cara, eu geralmente coloco após o form, mas pode colocar antes com $(document).ready(function(){})
    – Sam
    Commented 9/07/2018 às 20:41
  • @Sam como adaptar o código para pular para o próximo campo do formulário, alterar .closest('tr') para o mesmo comportamento só que com o campo em foco? fiz um ajuste mas não resultou em nada.
    – ElvisP
    Commented 16/03/2020 às 15:12
  • @EliseuB. Faz um JSFiddle e me manda aí que eu vejo.
    – Sam
    Commented 17/03/2020 às 14:22
  • 1
    @Sam consegui resolver, usei o closest nos elementos inputs como no seu código e eliminei um nó, obrigado.
    – ElvisP
    Commented 17/03/2020 às 16:28
0
<html>
<body>

<script type="text/javascript">

    function EnterTab(InputId,Evento){

        if(Evento.keyCode == 13){       

            document.getElementById(InputId).focus();

        }

    }

</script>

<input type="editbox" id="input1" onkeydown="javascript:EnterTab('input2',event)">
<p>
<input type="editbox" id="input2" onkeydown="javascript:EnterTab('input3',event)">
<p>
<input type="editbox" id="input3" onkeydown="javascript:EnterTab('input4',event)">
<p>
<input type="checkbox" id="input4" onkeydown="javascript:EnterTab('input5',event)">
<p>

<input type="submit" id="input5">

</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .