Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gilberto Jr

Mudança de Campo no Formulário com o "ENTER"

Por , em Javascript

Recommended Posts

Gilberto Jr    26

Gilberto Jr
Postado

Bom dia;

 

Eu tenho esse código muda o focus de um campo input com um "ENTER". Porem esta com um problema que eu não consegui resolver. Segue abaixo o código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mudando Focus</title>
<script type="text/javascript">
function Enter(idinput){
	if(event.keyCode == 13){
		document.getElementById(idinput).focus();     
		return false;           
	}
}
</script>
</head>

<body>
<strong>CEP:</strong><br />
<input type="text" name="cep" id="cep" onblur="atualizacep(this.value)" onkeyup="Enter('logradouro');"  /></td>
<strong>Endereço:</strong><br />
<input type="text" name="logradouro" id="logradouro" onkeyup="Enter('numeroresidencia');"  /></td>
<strong>Numero:</strong><br />
<input type="text" name="numeroresidencia" id="numeroresidencia" onkeyup="Enter('complemento');"  /></td>
<strong>Complemento:</strong><br />
<input type="text" name="complemento" id="complemento" onkeyup="Enter('bairro');"  /></td>
<strong>Bairro:</strong><br />
<input type="text" name="bairro" id="bairro" onkeyup="Enter('cidade1');"  /></td>
</body>
</html>

No código acima vai funcionar pois os campos não esta dentro de um formulário. Se os campos estiver dentro de um formulário não funciona. Quando eu pressiono o ENTER faz o submit.

 

E também o código só funciona para campos input, se for um select não funciona.

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Fala ai Gilberto Blza!!!

 

Eu fiz os testes aqui e funcionou.

 

Eu acrescentei mais alguns Campos como "Radio - Checkbox - Select e o Form", funcionou tb.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mudando Focus</title>
<script type="text/javascript">
function Enter(idinput){
	if(event.keyCode == 13){
		document.getElementById(idinput).focus();     
		return false;           
	}
}
</script>
</head>

<body>
<form name="form" method="post" action="">
<strong>CEP:</strong>
<input type="text" name="cep" id="cep" onblur="atualizacep(this.value)" onkeyup="Enter('logradouro');"/>
<br />
<strong>Endereço:</strong>
<input type="text" name="logradouro" id="logradouro" onkeyup="Enter('numeroresidencia');"/>
<br />
<strong>Numero:</strong>
<input type="text" name="numeroresidencia" id="numeroresidencia" onkeyup="Enter('complemento');"/>
<br />
<strong>Complemento:</strong>
<input type="text" name="complemento" id="complemento" onkeyup="Enter('bairro');"/>
<br />
<strong>Bairro:</strong>
<input type="text" name="bairro" id="bairro" onkeyup="Enter('cor');"/>
<br />
<strong>Cor:</strong>
<input type="radio" name="cor" id="cor" value="preto" onkeyup="Enter('aceito');"/>Preto
<input type="radio" name="cor" id="cor" value="branco" onkeyup="Enter('aceito');"/>Branco
<br />
<strong>Aceito</strong>
<input type="checkbox" name="aceito" id="aceito" value="aceito" onkeyup="Enter('cidade');"/>
<br />
<strong>Cidade:</strong>
<select name="cidade" id="cidade" value="2"> 
<option value="0">Selecione</option>
<option value="SP">Sao Paulo</option>
<option value="RJ">Rio de Janeiro</option>
</select>
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Realmente funcionou. Mas funcionou porque eu tinha esquecido de colocar o input type="submit".

 

Fiz o teste agora colocando o botão de enviar e deu erro.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mudando Focus</title>
<script type="text/javascript">
function Enter(idinput){
	if(event.keyCode == 13){
		document.getElementById(idinput).focus();     
		return false;           
	}
}
</script>
</head>

<body>
<form name="form" method="post" action="">
<strong>CEP:</strong>
<input type="text" name="cep" id="cep" onblur="atualizacep(this.value)" onkeyup="Enter('logradouro');"/>
<br />
<strong>Endereço:</strong>
<input type="text" name="logradouro" id="logradouro" onkeyup="Enter('numeroresidencia');"/>
<br />
<strong>Numero:</strong>
<input type="text" name="numeroresidencia" id="numeroresidencia" onkeyup="Enter('complemento');"/>
<br />
<strong>Complemento:</strong>
<input type="text" name="complemento" id="complemento" onkeyup="Enter('bairro');"/>
<br />
<strong>Bairro:</strong>
<input type="text" name="bairro" id="bairro" onkeyup="Enter('cor');"/>
<br />
<strong>Cor:</strong>
<input type="radio" name="cor" id="cor" value="preto" onkeyup="Enter('aceito');"/>Preto
<input type="radio" name="cor" id="cor" value="branco" onkeyup="Enter('aceito');"/>Branco
<br />
<strong>Aceito</strong>
<input type="checkbox" name="aceito" id="aceito" value="aceito" onkeyup="Enter('cidade');"/>
<br />
<strong>Cidade:</strong>
<select name="cidade" id="cidade" value="2"> 
<option value="0">Selecione</option>
<option value="SP">Sao Paulo</option>
<option value="RJ">Rio de Janeiro</option>
</select>
<br />
<br />
<input type="submit" name="submit" value="envir" />
</form>
</body>
</html>

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Gilberto, tente essa agora.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mudando Focus</title>

<script type="text/javascript">
function teclaEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
</script>

</head>

<body>

<form name="form" method="post" action="">
<strong>CEP:</strong>
<input type="text" name="cep" id="cep" onkeypress="return teclaEnter(this, event)" />
<br />
<strong>Endereço:</strong>
<input type="text" name="logradouro" id="logradouro" onkeypress="return teclaEnter(this, event)" />
<br />
<strong>Numero:</strong>
<input type="text" name="numeroresidencia" id="numeroresidencia" onkeypress="return teclaEnter(this, event)" />
<br />
<strong>Complemento:</strong>
<input type="text" name="complemento" id="complemento" onkeypress="return teclaEnter(this, event)" />
<br />
<strong>Bairro:</strong>
<input type="text" name="bairro" id="bairro" onkeypress="return teclaEnter(this, event)" />
<br />
<strong>Cor:</strong>
<input type="radio" name="cor" id="cor" value="preto" onkeypress="return teclaEnter(this, event)" />Preto
<input type="radio" name="cor" id="cor" value="branco" onkeypress="return teclaEnter(this, event)" />Branco
<br />
<strong>Aceito</strong>
<input type="checkbox" name="aceito" id="aceito" value="aceito" onkeypress="return teclaEnter(this, event)" />
<br />
<strong>Cidade:</strong>
<select name="cidade" id="cidade" value="2"> 
<option value="0">Selecione</option>
<option value="SP">Sao Paulo</option>
<option value="RJ">Rio de Janeiro</option>
</select>
<br />
<br />
<input type="submit" name="submit" value="enviar" />
</form>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito