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">