Skip to main content
Adição do snippet
Fonte Link
KaduAmaral
  • 11,7mil
  • 1
  • 34
  • 81

Você deve adicionar um event listenerevent listener no input-1input-1 dos tipos

E fazer este disparar uma função que trate os dados do input-1input-1 e insira eles no input-2input-2.

HTML

<input id="input-1" type="text">
<input id="input-2" type="text">

Javascript com JQuery para facilitar visualizar o bindingbinding do evento:

$(document).ready( function(){
    $('#input-1').keyup(function (e) {
        var patt = /([0-9]{1,2}:[0-9]{2})/;
        // Testando se o valor digitado já é algo como nn:nn
        if (patt.test(e.target.value)) {
            var strsplit = e.target.value.split(':');
            var hora = Number(strsplit[0]) + 2;
            var min = (strsplit[1]);
            var stringfinal = '';
            // ex. se hora = 24 então vira 00, se hora = 25 então vira 01;
            if (hora > 23) {
                hora = hora - 24;
            }
            if (hora < 10) {
                stringfinal += '0' + hora;
            } else {
                stringfinal += hora;
            }
            stringfinal += ':' + min;
            $('#input-2').val(stringfinal);
        } else {
            // Faz nada...   
        }
    });
});

$(document).ready( function(){
    $('#input-1').keyup(function (e) {
        var patt = /([0-9]{1,2}:[0-9]{2})/;
        // Testando se o valor digitado já é algo como nn:nn
        if (patt.test(e.target.value)) {
            var strsplit = e.target.value.split(':');
            var hora = Number(strsplit[0]) + 2;
            var min = (strsplit[1]);
            var stringfinal = '';
            // ex. se hora = 24 então vira 00, se hora = 25 então vira 01;
            if (hora > 23) {
                hora = hora - 24;
            }
            if (hora < 10) {
                stringfinal += '0' + hora;
            } else {
                stringfinal += hora;
            }
            stringfinal += ':' + min;
            $('#input-2').val(stringfinal);
        } else {
            // Faz nada...   
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input-1" type="text">
<input id="input-2" type="text">

Você deve adicionar um event listener no input-1 dos tipos

E fazer este disparar uma função que trate os dados do input-1 e insira eles no input-2.

HTML

<input id="input-1" type="text">
<input id="input-2" type="text">

Javascript com JQuery para facilitar visualizar o binding do evento:

$(document).ready( function(){
    $('#input-1').keyup(function (e) {
        var patt = /([0-9]{1,2}:[0-9]{2})/;
        // Testando se o valor digitado já é algo como nn:nn
        if (patt.test(e.target.value)) {
            var strsplit = e.target.value.split(':');
            var hora = Number(strsplit[0]) + 2;
            var min = (strsplit[1]);
            var stringfinal = '';
            // ex. se hora = 24 então vira 00, se hora = 25 então vira 01;
            if (hora > 23) {
                hora = hora - 24;
            }
            if (hora < 10) {
                stringfinal += '0' + hora;
            } else {
                stringfinal += hora;
            }
            stringfinal += ':' + min;
            $('#input-2').val(stringfinal);
        } else {
            // Faz nada...   
        }
    });
});

Você deve adicionar um event listener no input-1 dos tipos

E fazer este disparar uma função que trate os dados do input-1 e insira eles no input-2.

Javascript com JQuery para facilitar visualizar o binding do evento:

$(document).ready( function(){
    $('#input-1').keyup(function (e) {
        var patt = /([0-9]{1,2}:[0-9]{2})/;
        // Testando se o valor digitado já é algo como nn:nn
        if (patt.test(e.target.value)) {
            var strsplit = e.target.value.split(':');
            var hora = Number(strsplit[0]) + 2;
            var min = (strsplit[1]);
            var stringfinal = '';
            // ex. se hora = 24 então vira 00, se hora = 25 então vira 01;
            if (hora > 23) {
                hora = hora - 24;
            }
            if (hora < 10) {
                stringfinal += '0' + hora;
            } else {
                stringfinal += hora;
            }
            stringfinal += ':' + min;
            $('#input-2').val(stringfinal);
        } else {
            // Faz nada...   
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input-1" type="text">
<input id="input-2" type="text">

Fonte Link
ooredroxoo
  • 756
  • 3
  • 9

Sim,

Você deve adicionar um event listener no input-1 dos tipos

  • KeyDown(quando a tecla é pressionada mas não solta) ou,
  • KeyUp (quando a tecla é solta) ou,
  • KeyPress (quando a tecla é pressionada)
  • ou ainda Blur (quando sair do input)

E fazer este disparar uma função que trate os dados do input-1 e insira eles no input-2.

Tendo como exemplo o seguinte código:

HTML

<input id="input-1" type="text">
<input id="input-2" type="text">

Javascript com JQuery para facilitar visualizar o binding do evento:

$(document).ready( function(){
    $('#input-1').keyup(function (e) {
        var patt = /([0-9]{1,2}:[0-9]{2})/;
        // Testando se o valor digitado já é algo como nn:nn
        if (patt.test(e.target.value)) {
            var strsplit = e.target.value.split(':');
            var hora = Number(strsplit[0]) + 2;
            var min = (strsplit[1]);
            var stringfinal = '';
            // ex. se hora = 24 então vira 00, se hora = 25 então vira 01;
            if (hora > 23) {
                hora = hora - 24;
            }
            if (hora < 10) {
                stringfinal += '0' + hora;
            } else {
                stringfinal += hora;
            }
            stringfinal += ':' + min;
            $('#input-2').val(stringfinal);
        } else {
            // Faz nada...   
        }
    });
});

Isso deve dar o efeito planejado, a função que fiz foi bem básica e pode ser muito melhorada, é mais uma prova de conceito.

Os eventos podem ser aferidos mesmo sem jQuery. Mais informações podem ser encontradas em Input na MDN e KeyUpEvent na MDN

Espero que isso responda sua pergunta.