none
Trocar Tab por Enter ASPNET RRS feed

  • Pergunta

  • uso VS2010, C#, aspnet4, ajax

    Tenho na minha página aspx alguns textbox e dropdown queria uma função/script ou classe, não pra colocar em cada componente individual mas na pagina toda para fazer o Enter funcionar como Tab

    domingo, 29 de janeiro de 2012 12:10

Respostas

  • Boa tarde Boa_Vida

    Você pode colocar o JQuery na sua aplicação e fazer por ele, é muito menos linhas de código.

    Com JQuery ficaria assim:

    $(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) {
    		currentBoxNumber = textboxes.index(this);
    
    		if (textboxes[currentBoxNumber + 1] != null) {
    			nextBox = textboxes[currentBoxNumber + 1]
    			nextBox.focus();
                event.preventDefault();
                return false;
    		}	 
    	}
    }
    });



    Pedro Henrique B. Fernandes
    MCPD - Web Developer 4
    Site: pedrofernandes.net
    domingo, 29 de janeiro de 2012 18:35
  • Bom dia, Boa vida.
    Para toda página acredito não ser possível. Mas aqui vai uma função perfeita e que funciona em todos navegadores:

    1. <script type="text/javascript">  
        
      function autoTab(input, e)  {   
        var ind = 0;  
        var isNN = (navigator.appName.indexOf("Netscape")!=-1);  
        var keyCode = (isNN) ? e.which : e.keyCode;   
        var nKeyCode = e.keyCode;   
        if(keyCode == 13){   
          if (!isNN) {window.event.keyCode = 0;} // evitar o beep  
          ind = getIndex(input);  
          if (input.form[ind].type == 'textarea') {  
            return;  
          }  
          ind++;  
          input.form[ind].focus();   
          if (input.form[ind].type == 'text') {  
            input.form[ind].select();   
          }  
        }   
        
        function getIndex(input) {   
          var index = -1, i = 0, found = false;   
          while (i < input.form.length && index == -1)   
            if (input.form[i] == input) {  
              index = i;  
                if (i < (input.form.length -1)) {  
                 if (input.form[i+1].type == 'hidden') {  
             index++;   
           }  
           if (input.form[i+1].type == 'button' && input.form[i+1].id == 'tabstopfalse') {  
             index++;   
           }  
         }  
            }  
            else   
         i++;   
          return index;   
        }  
      }   
        
      </script>  
      


    E no TextBox coloque:
    onkeypress ="autoTab(this, event);" 

    Abraços e se foi útil, por favor, marque como resposta. :)
    Evandro Aguiar
    http://wta3.com.br

    Farei o possível, para ajudar. Caso eu consiga, marque minha resposta como útil e me faça feliz. :) hauhauhauhauh
    • Sugerido como Resposta EvandroAS domingo, 29 de janeiro de 2012 13:18
    • Marcado como Resposta Álvaro Luiz segunda-feira, 30 de janeiro de 2012 01:45
    • Não Marcado como Resposta Álvaro Luiz sábado, 11 de fevereiro de 2012 11:41
    • Marcado como Resposta Álvaro Luiz sábado, 11 de fevereiro de 2012 11:41
    domingo, 29 de janeiro de 2012 13:18
  • Você achou mesmo que tem muitas linhas de código ?
    Se você quer uma solução cross-browser ( ou seja, que funciona em todos browsers ) tem que ter algumas linhas de código a mais mesmo. :)

    Abraços... E, por favor, marque como resposta ou como útil. :)
    Evandro Aguiar
    http://wta3.com.br

    Farei o possível, para ajudar. Caso eu consiga, marque minha resposta como útil e me faça feliz. :) hauhauhauhauh
    • Sugerido como Resposta EvandroAS domingo, 29 de janeiro de 2012 17:57
    • Marcado como Resposta Álvaro Luiz segunda-feira, 30 de janeiro de 2012 11:28
    domingo, 29 de janeiro de 2012 17:57

Todas as Respostas

  • Bom dia, Boa vida.
    Para toda página acredito não ser possível. Mas aqui vai uma função perfeita e que funciona em todos navegadores:

    1. <script type="text/javascript">  
        
      function autoTab(input, e)  {   
        var ind = 0;  
        var isNN = (navigator.appName.indexOf("Netscape")!=-1);  
        var keyCode = (isNN) ? e.which : e.keyCode;   
        var nKeyCode = e.keyCode;   
        if(keyCode == 13){   
          if (!isNN) {window.event.keyCode = 0;} // evitar o beep  
          ind = getIndex(input);  
          if (input.form[ind].type == 'textarea') {  
            return;  
          }  
          ind++;  
          input.form[ind].focus();   
          if (input.form[ind].type == 'text') {  
            input.form[ind].select();   
          }  
        }   
        
        function getIndex(input) {   
          var index = -1, i = 0, found = false;   
          while (i < input.form.length && index == -1)   
            if (input.form[i] == input) {  
              index = i;  
                if (i < (input.form.length -1)) {  
                 if (input.form[i+1].type == 'hidden') {  
             index++;   
           }  
           if (input.form[i+1].type == 'button' && input.form[i+1].id == 'tabstopfalse') {  
             index++;   
           }  
         }  
            }  
            else   
         i++;   
          return index;   
        }  
      }   
        
      </script>  
      


    E no TextBox coloque:
    onkeypress ="autoTab(this, event);" 

    Abraços e se foi útil, por favor, marque como resposta. :)
    Evandro Aguiar
    http://wta3.com.br

    Farei o possível, para ajudar. Caso eu consiga, marque minha resposta como útil e me faça feliz. :) hauhauhauhauh
    • Sugerido como Resposta EvandroAS domingo, 29 de janeiro de 2012 13:18
    • Marcado como Resposta Álvaro Luiz segunda-feira, 30 de janeiro de 2012 01:45
    • Não Marcado como Resposta Álvaro Luiz sábado, 11 de fevereiro de 2012 11:41
    • Marcado como Resposta Álvaro Luiz sábado, 11 de fevereiro de 2012 11:41
    domingo, 29 de janeiro de 2012 13:18
  • Olá Evandro, sua solução fez o que prometeu!

    Mas voce nao teria nada mais "lite" quero dizer, é necessário mesmo esse monte de linha de código apenas pra trocar tab por enter?

    Mas mesmo assim obrigado pela ajuda
    domingo, 29 de janeiro de 2012 16:17
  • Você achou mesmo que tem muitas linhas de código ?
    Se você quer uma solução cross-browser ( ou seja, que funciona em todos browsers ) tem que ter algumas linhas de código a mais mesmo. :)

    Abraços... E, por favor, marque como resposta ou como útil. :)
    Evandro Aguiar
    http://wta3.com.br

    Farei o possível, para ajudar. Caso eu consiga, marque minha resposta como útil e me faça feliz. :) hauhauhauhauh
    • Sugerido como Resposta EvandroAS domingo, 29 de janeiro de 2012 17:57
    • Marcado como Resposta Álvaro Luiz segunda-feira, 30 de janeiro de 2012 11:28
    domingo, 29 de janeiro de 2012 17:57
  • Boa tarde Boa_Vida

    Você pode colocar o JQuery na sua aplicação e fazer por ele, é muito menos linhas de código.

    Com JQuery ficaria assim:

    $(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) {
    		currentBoxNumber = textboxes.index(this);
    
    		if (textboxes[currentBoxNumber + 1] != null) {
    			nextBox = textboxes[currentBoxNumber + 1]
    			nextBox.focus();
                event.preventDefault();
                return false;
    		}	 
    	}
    }
    });



    Pedro Henrique B. Fernandes
    MCPD - Web Developer 4
    Site: pedrofernandes.net
    domingo, 29 de janeiro de 2012 18:35
  • Olá Pedro existe essa solução em Ajax, pois é o que uso em minhas aplicações
    segunda-feira, 30 de janeiro de 2012 01:47