none
Enter com comportamento de tab RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

    quinta-feira, 28 de junho de 2012 11:09
    |

Respostas

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    sexta-feira, 29 de junho de 2012 02:14
    |

Todas as Respostas

  • Question
    Entrar para Votar
    0
    Entrar para Votar
    /**************************************************************************
    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.

    quinta-feira, 28 de junho de 2012 12:00
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    a rotina sem o jquery não funciona no firefox
    quinta-feira, 28 de junho de 2012 12:03
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    voce poderia por favor melhorar o exemplo com jquery

    aonde eu coloco isto na pagina?

    quinta-feira, 28 de junho de 2012 12:17
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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"

    quinta-feira, 28 de junho de 2012 13:07
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    <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.

    quinta-feira, 28 de junho de 2012 13:15
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

    quinta-feira, 28 de junho de 2012 13:21
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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"

    quinta-feira, 28 de junho de 2012 16:03
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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>

    quinta-feira, 28 de junho de 2012 16:35
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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"

    quinta-feira, 28 de junho de 2012 17:42
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
      

    quinta-feira, 28 de junho de 2012 17:55
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    sexta-feira, 29 de junho de 2012 02:14
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

    sexta-feira, 29 de junho de 2012 10:53
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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"

    sexta-feira, 29 de junho de 2012 12:17
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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>

    sexta-feira, 29 de junho de 2012 12:30
    |