Transformando ENTER em TAB (javascript)
08/09/2019
0
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>
Rodrigo Neves
Posts
10/09/2019
Matheus Santos
https://stackoverflow.com/questions/1009808/enter-key-press-behaves-like-a-tab-in-javascript
10/09/2019
Sadasd
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().
10/09/2019
Giovanny Montinny
<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.
10/09/2019
Rodrigo Neves
<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.
11/09/2019
Giovanny Montinny
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
11/09/2019
Rodrigo Neves
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?
Clique aqui para fazer login e interagir na Comunidade :)
