2

Eu tenho um input que vou dar o nome de input-1, e lá vou inserir isto: 12:00

Ao ter um segundo input que vou dar o nome de input-2, é possível ao inserir no input-1: 12:00

Ele no input-2 possa preencher automaticamente o tempo que coloquei no input-1 mas com mais duas horas.

Exemplo:

Coloco 10:00 no input-1 e no input-2 aparecer: 12:00.

É possível fazer isso?

0

2 Respostas 2

4

Você poderia criar uma função para pegar o valor valor do primeiro input e definir uma segunda variável para somar, no seu caso, com o valor de 2. Assim ele pegará o valor, e somará com o número definido na variável.

function calc()
{
  var a = "2";
  var b = valor.value;

  total.value = parseFloat(a) + parseFloat(b) + ':00';
}
Valor: <input type="time" id="valor" onkeypress="calc()"><br/><br/>
Total: <input type="time" id="total">

Neste caso eu coloquei o :00 apenas para seguir o seu exemplo, mas ele é irrelevante, caso não seja preciso utilizar o mesmo.

5
  • 1
    Dude. Que cena mais básica e eu p'rali com match p'ratodo o lado. Bravo :)
    – MoshMage
    23/04/2015 às 0:11
  • Como faço para colocar um zero antes, da 1 da manha até as 9?
    – thecreator
    23/04/2015 às 0:12
  • 1
    +1 btw, o input de Valor está type="teStbox" e mesmo assim está funcionando. Então deve funcionar também com type="text" (que ele pega por padrão) apenas né? Vc sabe se é possível utilizar o mesmo exemplo para type="time" (com aquelas caixinhas duplas de escolha do tempo, do HTML5), ou só se a entrada for de texto mesmo? De qualquer forma valeu, já vai ser útil pra mim.
    – gustavox
    23/04/2015 às 21:55
  • 1
    @gustavox ele funciona com o type="text" e com type="time". Ele pega o valor do input, independente do type. Editei a resposta com um exemplo de time.
    – Randrade
    24/04/2015 às 12:46
  • 1
    Muito bom, vai ser bem útil, valeu!
    – gustavox
    24/04/2015 às 15:43
3

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:

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

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.

1
  • Obrigado ! Era mesmo isto que queria, obrigado mesmo !
    – thecreator
    23/04/2015 às 0:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .