Usuário com melhor resposta
Enter com comportamento de tab

Pergunta
-
alguem tem código em javascript para o enter funcionar como tab
em componentes html , obs: estes componentes não são asp.net
alem disto preciso saber o tipo de componente html, pois nos tipos campo multiline isto não é necessário
se fosse possível fazer uma rotina na body da pagina html sem ter que fazer em cada campo melhor
preciso que rode no ie e firefox
Respostas
-
Amigo,
É péssimo chamar alguém de amigão...ainda mais se essa pessoa está tentando te ajudar, mesmo assim vamos lá...
Se você prestar um pouco de atenção no código que eu postei na primeira e na terceira vez, vai notar que eu utilizei o bom e velho JQUERY para setar o script em todos os campos INPUT, exemplo:
<script> $('input').keydown( function(e) { //código }); </script>
No seu caso o código ficaria assim:
<script> $('input').keydown( function(e) { JS_setaFoco(); }); </script>
Como você pode ver eu estou passando apenas os campos INPUT se quiser passar outros campos é só adicionar "," e a tag "input, select, textarea" e por ai vai.
Não sei se esse é o seu caso, mas algumas pessoas não gostam de utilizar JQUERY achando que ele vai dar problema de compatibilidade e tudo mais...infelizmente isso não é verdade se você escrever um código limpo e preciso ele vai funcionar em qualquer BROWSER até no lixo do IE6.
Espero ter ajudado e boa sorte!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio"- Marcado como Resposta cesarmene sexta-feira, 29 de junho de 2012 10:54
Todas as Respostas
-
/**************************************************************************
Função para simular um Tab quando for pressionado a tecla Enter
Exemplo: onKeyDown="TABEnter()"
Funciona em TEXT BOX,RADIO BUTTON, CHECK BOX e menu DROP-DOWN
**************************************************************************/
function TABEnter(oEvent){
var oEvent = (oEvent)? oEvent : event;
var oTarget =(oEvent.target)? oEvent.target : oEvent.srcElement;
if(oEvent.keyCode==13)
oEvent.keyCode = 9;
if(oTarget.type=="text" && oEvent.keyCode==13)
//return false;
oEvent.keyCode = 9;
if (oTarget.type=="radio" && oEvent.keyCode==13)
oEvent.keyCode = 9;
}Usando Jquery
textboxes = $("input, select, textarea");
if ($.browser.mozilla) {
$(textboxes).keypress (checkForEnter);
} else {
$(textboxes).keydown (checkForEnter);
}
function checkForEnter (event) {
console.log(this);
if (event.keyCode == 13) {
currentBoxNumber = textboxes.index(this);
if (textboxes[currentBoxNumber + 1] != null) {
nextBox = textboxes[currentBoxNumber + 1]
nextBox.focus();
event.preventDefault();
return false;
}
}
}Não esqueça de marcar o post como útil caso tenha te ajudado.
-
-
-
Cesar,
Com um pouquinho menos de preguiça você acha essa solução rapidinho.
Segue o código abaixo:<!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>Untitled Document</title> <script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(e) { $('input').keydown( function(e) { var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; if(key == 13) { e.preventDefault(); var inputs = $(this).closest('form').find(':input:visible'); inputs.eq( inputs.index(this)+ 1 ).focus(); } }); }); </script> </head> <body> <form> <input type="text" name="teste-1" /> <br /> <input type="text" name="teste-2" /> <br /> <input type="text" name="teste-3" /> <br /> <input type="text" name="teste-4" /> <br /> <input type="text" name="teste-5" /> <br /> <input type="text" name="teste-6" /> <br /> <input type="text" name="teste-7" /> <br /> <input type="text" name="teste-8" /> </form> </body> </html>
Bao sorte!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio" -
<script language="javascript" type="text/javascript">
var textboxes = $("input, select, textarea");
if ($.browser.mozilla) {
$(textboxes).keypress (checkForEnter);
} else {
$(textboxes).keydown (checkForEnter);
}
function checkForEnter (event) {
if (event.keyCode == 13) {
currentBoxNumber = textboxes.index(this);
if (textboxes[currentBoxNumber + 1] != null) {
nextBox = textboxes[currentBoxNumber + 1]
nextBox.focus();
event.preventDefault();
return false;
}
}
}
</script><form></fom>
Mas como o Lucas comentou essa é uma função fácil de encontrar no google
Não esqueça de marcar o post como útil caso tenha te ajudado.
-
obrigado
mas não é preguiça
o que eu preciso é que o enter retorne o codigo do evento para o objeto = 9 que é o tab
if(oTarget.type=="text" && oEvent.keyCode==13)
//return false;
oEvent.keyCode = 9;porque se ele simplesmente for para o proximo campo
alguns campos com validação não são executadas estas validações
-
Não...não...kkkk!!
Veja se funciona essa lógica:
<script> var item = $("#nome_campo"); if(item.val() == ""){ alert('preencha o campo'); }else{ var inputs = $(item).closest('form').find(':input:visible'); inputs.eq( inputs.index(item)+ 1 ).focus(); } </script>
Boa sorte!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio" -
amigo voce está sendo muito colaborativo e paciente obrigado
mas acho que não me fiz entender bem
preciso que quando o usuário tecle tab
o evento seja ouvido e respondido no componente como enter
apenas isto, muito obrigado
estou tentando adaptar este código para "fazer um raise event"
<script language="JavaScript">
$(function () {
textboxes = $("input, select, textarea");
if ($.browser.mozilla) {
$(textboxes).keypress (checkForEnter);
} else {
$(textboxes).keydown (checkForEnter);
}
function checkForEnter (event) {
//console.log(this);
if (event.keyCode == 13) {
//event.keyCode = 9;
currentBoxNumber = textboxes.index(this);
//if (textboxes[currentBoxNumber + 1] != null) {
//nextBox = textboxes[currentBoxNumber + 1]
//nextBox.focus();
event.preventDefault();
event.keyCode = 9;
return 9; // seria tab
}
}
}
});
</script> -
AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!
<!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>Untitled Document</title> <script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(e) { $('input').keydown( function(e) { var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; if(key == 9) { e.preventDefault(); $('#btnEnviar').click(); } }); }); function valida(){ alert('Foi'); } </script> </head> <body> <form> <input type="text" name="teste-1" /> <br /> <input type="text" name="teste-2" /> <br /> <input type="text" name="teste-3" /> <br /> <input type="text" name="teste-4" /> <br /> <input type="text" name="teste-5" /> <br /> <input type="text" name="teste-6" /> <br /> <input type="text" name="teste-7" /> <br /> <input type="submit" id="btnEnviar" value="Envia" onclick="valida()" /> </form> </body> </html>
Agora vai!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio" -
AMIGÃO
veja o código abaixo
este código é chamado do envento onKeyDown="JS_setaFoco(this)"
funciona perfeitamente
veja ele retorna oEvent.keyCode = 9 (tab)
funciona perfeitamente no ie
mas o incomodo é que tenho que colocar onKeyDown="JS_setaFoco(this)" em cada tag
porque preciso disto if(oTarget.type=="text" && oEvent.keyCode==13) para saber que tipo de controle no momento
MAS EU NÃO GOSTARIA DE COLOCAR EM CADA TAG
TENTEI COM document.onkeydown= JS_setaFoco() , mas não funciona como a rotina chamada da tag
function JS_setaFoco() {
var oEvent;
var oTarget;
var tab =9;
var navegador;
if ( navigator.userAgent.indexOf( 'Firefox' ) != -1 ) {
navegador ="firefox";
}
if ( navigator.userAgent.indexOf( 'MSIE' ) != -1 ) {
navegador ="ie";
}
if(navegador=="ie") {
oEvent = (oEvent)? oEvent : event;
oTarget = (oEvent.target)? oEvent.target : oEvent.srcElement;
if(oTarget.type=="text" && oEvent.keyCode==13)
oEvent.keyCode = tab;
if (oTarget.type=="radio" && oEvent.keyCode==13)
oEvent.keyCode = tab;
} // ie
-
Amigo,
É péssimo chamar alguém de amigão...ainda mais se essa pessoa está tentando te ajudar, mesmo assim vamos lá...
Se você prestar um pouco de atenção no código que eu postei na primeira e na terceira vez, vai notar que eu utilizei o bom e velho JQUERY para setar o script em todos os campos INPUT, exemplo:
<script> $('input').keydown( function(e) { //código }); </script>
No seu caso o código ficaria assim:
<script> $('input').keydown( function(e) { JS_setaFoco(); }); </script>
Como você pode ver eu estou passando apenas os campos INPUT se quiser passar outros campos é só adicionar "," e a tag "input, select, textarea" e por ai vai.
Não sei se esse é o seu caso, mas algumas pessoas não gostam de utilizar JQUERY achando que ele vai dar problema de compatibilidade e tudo mais...infelizmente isso não é verdade se você escrever um código limpo e preciso ele vai funcionar em qualquer BROWSER até no lixo do IE6.
Espero ter ajudado e boa sorte!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio"- Marcado como Resposta cesarmene sexta-feira, 29 de junho de 2012 10:54
-
bem, se voce se ofendeu pelo amigão
foi uma maneira gentil de agradecer sua colaboração
NÃO ESQUEÇA, NINGUÉM É MELHOR DO QUE NINGUÉM ...
muito obrigado
o que estou querendo fazer é que no enter ele entenda como tab
ele devolva para o objeto o evento tab tipo send tab
-
Que isso não esquenta e esse seu pensamento sobre ninguém ser melhor do que ninguém está certíssimo, infelizmente nessa área de TI muita gente não sabe disso! Sobre o amigão relaxa é que infelizmente soa irônico.
Pelo visto a solução deu certo, correto?
Boa sorte!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio" -
valeu
ajudou bastante mas estou tentando fazer que esta função não vá para o
próximo campo mas sim provoque o evento tab
porque a plataforma que desenvolvo quando o usuario dá um tab em um campo requerido ele dá uma mensagem
em ajax e mostra a mensagem do lado do campo, voce sabe como é
então é por isto que não posso ir para o próximo campo e sim dar algo tipo send event para o input = evento.tab
estou tentando nesta função mas não estou conseguindo
<script type="text/javascript" language="javascript">
$(document).ready(function (e) {
$('input').keydown(function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if (key == 13) {
e.keyCode = 9;
e.preventDefault();
// var inputs = $(this).closest('form').find(':input:visible');
// inputs.eq(inputs.index(this) + 1).focus();
}
});
});
</script>