0

Estoy elaborando este pequeño formulario el cual consta de 8 botones, los primeros 4 son para el modo alarma, los otros 4 son para el modo fecha. Me gustaría saber como saltar al siguiente campo,cuando presione el botón "cambiar" en javascript. ya que esa opción no la he podido hacer.

dejo para poder visualizarlo en jsfiddle

1 respuesta 1

1

Puedes intentar algo así

let field1 = document.getElementById('horas');
let field2 = document.getElementById('minutos');
let field3 = document.getElementById('segundos');
let fields = [field1, field2, field3];
field1.focus();
let currentField = 0;

function changeField(i){
  currentField = i;
}

function change() {
  if(currentField>=fields.length-1) currentField = -1;
  fields[++currentField].focus();
}

function incrementar() {
  if(currentField===0 && fields[currentField].value < 24) fields[currentField].value++
  /* Agregar tus demás comprobaciones para minutos y segundos y añadirle 1 al valor */
}
  <form class="form">
        <input class="focusNext" type="number" max="23" min="0" id="horas" tabindex="1" onfocus="changeField(0)">
        <input class="focusNext" type="number" max="59" min="0" id="minutos" tabindex="2" onfocus="changeField(1)">
        <input class="focusNext" type="number" max="59" min="0" id="segundos" tabindex="3" onfocus="changeField(2)">
    </form>

    <div>
        <button class="btn-1" id="btn-1" onclick="change()">cambiar</button>
        <button class="btn-2" id="btn-2" onclick="incrementar()">aumentar</button>
        <button class="btn-3" id="btn-3" onclick="decrementar()">disminuir</button>
        <button class="btn-4" id="btn-4" onclick="">iniciar</button>
    </div>
    <hr>

4
  • me funciona perfectamente, solo que yo he cometido un error, en solo aumentar la hora cuando lo cambio de campo.
    – BernalHD
    el 11 nov. 2019 a las 5:05
  • perdón , pero como aumento el valor cuando me lo cambie?
    – BernalHD
    el 11 nov. 2019 a las 5:32
  • 1
    @BernalHD Ya está, sólo agrega las demás comprobaciones para los minutos y segundos, y haz que aumente su valor en uno. Como te deje el código sólo aumentara cuando se encuentre en el campo de las horas. también corregí que cuando tu pongas el foco en una caja de texto manualmente se cambie el valor de currentField. el 11 nov. 2019 a las 6:02
  • creo que esto mismo puedo aplicar al option, donde tengo dia,mes,año?
    – BernalHD
    el 11 nov. 2019 a las 7:13

Tu Respuesta

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

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