2012-05-10 30 views
6

Estoy trabajando en un sitio que está lleno de formularios para rellenar y se requiere que cuando se presione el botón de escape, mueva el foco al siguiente control de entrada, al igual que al presionar "tab" hacer. me pareció código para mover el foco cuando keypressed es 13, pero esta necesidad de tomar el ID del elemento que se centran enCómo forzar a "ingresar la clave" para que actúe como "tecla de tabulación" mediante javascript?

<input id="Text1" type="text" onkeydown="return noNumbers(event)" /> 
<input id="Text2" type="text" /> 

<script type="text/javascript"> 

    function noNumbers(e) { 

     keynum = e.which; 

     if (keynum == 13) 
      document.getElementById("Text2").focus(); 

    } 
</script> 

necesito una función generalizada que cuando haya pulsado el botón de código es de 13 "que se introduzca" disparar el valor por defecto evento de pulsar 9 "es decir pestaña", por supuesto en Javascript

+0

Así que al presionar la tecla de retorno/ingresar no se enviará el formulario? – BenM

+0

Creo que primero necesita evitar la acción predeterminada de la tecla Intro (https://developer.mozilla.org/en/DOM/event.preventDefault) y luego haga lo que quiera – MilkyWayJoe

+0

Similar a la publicación [http://stackoverflow.com/questions/4604930/changing-the-keypress](http://stackoverflow.com/questions/4604930/changing-the-keypress). –

Respuesta

2

mango pulsación de tecla en lugar y volver falsa de vuelta al navegador:

http://jsfiddle.net/EeyTL/

<input id="Text1" type="text" /> 
<input id="Text2" type="text" /> 

<script type="text/javascript"> 
    document.getElementById('Text1').onkeypress = function (e) { 
     if (e.which === 13) { 
      document.getElementById("Text2").focus(); 
      return false; 
     } 
    }; 
</script> 
7

Esto manejará múltiples campos de entrada.

Aquí está la versión de jQuery: http://jsfiddle.net/TnEB5/3/

$('input').keypress(function(e) { 
 
    if (e.which == 13) { 
 
     $(this).next('input').focus(); 
 
     e.preventDefault(); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="Text1" type="text" /> 
 
<input id="Text2" type="text" /> 
 
<input id="Text3" type="text" />

Aquí está la versión javascript puro: http://jsfiddle.net/TnEB5/5/ (es probable que quieran conseguir los hermanos de manera diferente)

function tab(e) { 
 
    if (e.which == 13) { 
 
     e.target.nextSibling.nextSibling.focus(); 
 
     e.preventDefault(); 
 
    } 
 
} 
 
var inputs = document.getElementsByTagName('input'); 
 
for (var x = 0; x < inputs.length; x++) 
 
{ 
 
    var input = inputs[x]; 
 
    input.onkeypress = tab; 
 
}
<input id="Text1" type="text" /> 
 
<input id="Text2" type="text" /> 
 
<input id="Text3" type="text" />

+1

jQuery no fue mencionado por el OP. –

+1

Sí, pero él no dijo que no lo era y que no es difícil de agregar. Usar jQuery proporcionaría una solución más flexible más fácil. – bygrace

+0

Agregué la versión de JavaScript. – bygrace

0
<input type="text" value="" onkeyup="doNext(this);"> a <br> 
<input type="text" value="" onkeyup="doNext(this);"> b <br> 
<input type="text" value="" onkeyup="doNext(this);"> c <br> 

function doNext(el){     
    if(event.keyCode=='13'){ 
    var nextEl = el.form.elements[el.tabIndex+1]; 
    if (nextEl && nextEl.focus) nextEl.focus(); 
    } 
} 
-1

Creo con e.preventDefault(); es más seguro que regresar falso

1

Deberá establecer explícitamente la propiedad tabindex de los campos de entrada para una solución genérica. Algo así como

<input id="Text1" type="text" tabindex="1" /> 
<input id="Text2" type="text" tabindex="2" /> 

<script type="text/javascript"> 
    $('input').keypress(function(e){ 
     if(e.which==13){ 
      $("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus(); 
      e.preventDefault(); 
     } 
    });  
</script> 

esta solución utiliza jQuery para asignar el controlador de eventos para todos los elementos del tipo de entrada en la página, establece el foco al elemento con el siguiente propiedad tabIndex más alta, y evita que la forma de presentar, cuando se pulsa ENTER usando e.preventDefault(). Aquí hay un jfiddle

0

Aunque la publicación es antigua, espero que mi respuesta pueda ayudar a alguien que lo necesite. Tengo una situación smilar:

Tengo una forma muy grande para una aplicación planificador empleado con diferentes tipos de campos de entrada. Algunos de los campos de entrada están ocultos algunas veces y otras veces. Me llamaron para que la tecla Intro se comportase como la tecla de tabulación, por lo que los usuarios del formulario podrían usar la clave 10 al crear su agenda de empleados. Aquí es cómo resolví mi problema:

$(document).ready(function() { 
    var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form) 
    $(":text").on("keydown", function() {//(2)When an input field detects a keydown event 
     if (event.keyCode == 13) { 
      event.preventDefault(); 
      var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs 
      if (nextInput) { 
       nextInput.focus(); //(4)focus that next input if the input is not null 
      } 
     } 
    }); 
}); 

Lo que tenía que hacer era:

  1. crear una colección de todas las entradas que desee tener en cuenta cuando la tabulación. en mi caso, son entradas de texto que son visibles.
  2. Escuche un evento de keydown en las entradas en cuestión, en mi caso todas las entradas de campo de texto
  3. Cuando se presiona enter en mi entrada de texto, determine qué entrada se enfocará a continuación.
  4. Si esa entrada es válida, póngala en foco.
Cuestiones relacionadas