4

Tengo una función:

function validarLetras(e){
    tecla = (document.all) ? e.keyCode : e.which;
        if (tecla == 13 || tecla == 8 || tecla == 9 || tecla == 28 || tecla == 15 || tecla == 37 || tecla == 39) {
            return true;
        }
    patron = (/[a-z A-Z \ñ \Ñ]/);
    tecla_final = String.fromCharCode(tecla);
    return patron.test(tecla_final);
}

En un <input> onkeypress funciona lo que son las letras, pero no sirve el Enter, y en otros formularios el Enter me hace enviar los datos del <form>.

Necesito una funcion o forma de poder que al momento de dar enter, me envíe al <input> siguiente sin que este envíe datos del <form>. Con javascript nativo preferiblemente.

3 respuestas 3

3

Puedes hacer uso de focus(), que cuando se aprete enter se haga focus en el siguiente input.

document.getElementById('inputFirst').addEventListener('keydown', inputCharacters);

function inputCharacters(event) {
 
  if (event.keyCode == 13) {
    document.getElementById('inputSecond').focus();
  }

}
<input id='inputFirst'>
<input id='inputSecond'>

1
  • lo convertí en funcion: function nextFocus(inputF, inputS) { document.getElementById(inputF).addEventListener('keydown', function(event) { if (event.keyCode == 13) { document.getElementById(inputS).focus(); } }); } funciona en atributo onkeydown="nextFocus(this.name, "siguienteIdElement")", no sé por que no funciona onkeypress. el 25 dic. 2017 a las 0:39
0

document.getElementById('inputFirst').addEventListener('keydown', inputCharacters);

function inputCharacters(event) {
 
  if (event.keyCode == 13) {
    document.getElementById('inputSecond').focus();
  }

}
<input id='inputFirst'>
<input id='inputSecond'>

function nextFocus(inputF, inputS) {
  document.getElementById(inputF).addEventListener('keydown', function(event) {
    if (event.keyCode == 13) {
      document.getElementById(inputS).focus();
    }
  });
}
<input type="text" id="input1" onkeypress="nextFocus('input1', 'input2')"><br>
<input type="text" id="input2" onkeypress="nextFocus('input2', 'input3')"><br>
<input type="text" id="input3" onkeypress="nextFocus('input3', 'input4')"><br>
<input type="text" id="input4"><br>

0

Podrías solucionarlo así:

  • Para detectar la tecla presionada deberías utilizar key, ya que keyCode esta deprecado.

  • Para evitar que se envíe el formulario deberías utilizar preventDefault

Ejemplo:

document.addEventListener('keypress', function(evt) {

  // Si el evento NO es una tecla Enter
  if (evt.key !== 'Enter') {
    return;
  }
  
  let element = evt.target;

  // Si el evento NO fue lanzado por un elemento con class "focusNext"
  if (!element.classList.contains('focusNext')) {
    return;
  }

  // AQUI logica para encontrar el siguiente
  let tabIndex = element.tabIndex + 1;
  var next = document.querySelector('[tabindex="'+tabIndex+'"]');

  // Si encontramos un elemento
  if (next) {
    next.focus();
    event.preventDefault();
  }
});
<form>
  <label>
    Campo 1
    <input type="text" tabindex="1" class="focusNext">
  </label>
  <br>
  <label>
    Campo 2
    <input type="text" tabindex="2" class="focusNext">
  </label>
  <br>
  <label>
    Campo 3
    <input type="text" tabindex="3" class="focusNext">
  </label>
  <br>
  <button tabindex="4">Enviar</button>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.