Transformando ENTER em TAB (javascript)

08/09/2019

18

Pessoal,
preciso de uma ajuda, no código abaixo, quando eu aperto enter no formulário em HTML, a função do javascript funciona mais é acionado o botão submit, como faço para acionar esse botão somente no último enter?
segue o código:

<html>
	<body>

		<script type="text/javascript">

			function EnterTab(InputId,Evento){

				if(Evento.keyCode == 13){       

					document.getElementById(InputId).focus();
					
				}

			}

		</script>
		
		<form name="meuForm" method="post" id="formulario" action="teste.php">
			<p>
				<input type="editbox" id="input1" onkeydown="javascript:EnterTab(''''input2'''',event)">
			</p>
			<p>
				<input type="editbox" id="input2" onkeydown="javascript:EnterTab(''''input3'''',event)">
			</p>
			<p>
				<input type="editbox" id="input3" onkeydown="javascript:EnterTab(''''input4'''',event)">
			</p>
			<p>
				<input type="submit" id="input4" value = "Enviar" onkeydown="javascript:EnterTab(''''input5'''',event)">
			</p>
		</form>
	</body>
</html>
Responder

Posts

10/09/2019

Matheus Santos

Opa amigo, não sei se te ajuda, mas tem essa question. Olhe se for seu caso também.
https://stackoverflow.com/questions/1009808/enter-key-press-behaves-like-a-tab-in-javascript
Responder

10/09/2019

Daniel Melo

Já tentou utilizar o preventdefault()? é um método feito para cancelar a ação padrão de um evento, então ficaria assim:

Evento.preventDefault();
document.getElementById(InputId).focus();


Se isso funcionar basta você colocar um teste lógico para verificar se o input é o último input do formulário, e caso sim desativar esse preventDefault().
Responder
<html>
<body>

<script type="text/javascript">
window.onload = function() {
var form = document.querySelector("form");
form.onsubmit = submitted.bind(form);
}

function submitted(event) {
var input4 = document.getElementById(''input4'');
if(document.activeElement != input4){
event.preventDefault();
}
}
</script>

<form name="meuForm" method="post" id="formulario" action="teste.php">
<p>
<input type="editbox" id="input1" tabindex="1">
</p>
<p>
<input type="editbox" id="input2" tabindex="2">
</p>
<p>
<input type="editbox" id="input3" tabindex="3">
</p>
<p>
<input type="submit" id="input4" value = "Enviar">
</p>
</form>
</body>
</html>

Modifiquei um pouco mais acho q vai atender.
Responder

10/09/2019

Rodrigo Neves

<html>
<body>

<script type="text/javascript">
window.onload = function() {
var form = document.querySelector("form");
form.onsubmit = submitted.bind(form);
}

function submitted(event) {
var input4 = document.getElementById(''input4'');
if(document.activeElement != input4){
event.preventDefault();
}
}
</script>

<form name="meuForm" method="post" id="formulario" action="teste.php">
<p>
<input type="editbox" id="input1" tabindex="1">
</p>
<p>
<input type="editbox" id="input2" tabindex="2">
</p>
<p>
<input type="editbox" id="input3" tabindex="3">
</p>
<p>
<input type="submit" id="input4" value = "Enviar">
</p>
</form>
</body>
</html>

Modifiquei um pouco mais acho q vai atender.


Giovanny Montinny Obrigado pela ajuda, mas mesmo assim não funcionou, quando pressiono o enter, ele ativa o botão submit e envia o formulário.
Responder
Fiz uns teste aqui e funcionou.....
Salvei o exemplo no w3schools
https://www.w3schools.com/code/tryit.asp?filename=G7VUQCN2UM4V
E só rodar e testar, selecione input1 e aperte ENTER - TAB
input2 ENTER - TAB
input3 ENTER - TAB
Responder

11/09/2019

Rodrigo Neves

Fiz uns teste aqui e funcionou.....
Salvei o exemplo no w3schools
https://www.w3schools.com/code/tryit.asp?filename=G7VUQCN2UM4V
E só rodar e testar, selecione input1 e aperte ENTER - TAB
input2 ENTER - TAB
input3 ENTER - TAB


Testei aqui e não funcionou, nem no site w3schools.
O que eu posso está fazendo de errado?
Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira