2
respostas

Evento focus não funciona

Ao entrar o mouse na área de texto, o cronometro não é disparado, apenas após clicar, embora o evento seja focus. Me pareceu que no vídeo isto também ocorria quando o professor testava o código ao final da aula. O que está errado?

var tempoInicial = $('#tempo-digitacao').text();
var tempoRestante = $('#tempo-digitacao').text();
var campo = $('.campo-digitacao');

$ (function () {
    atualizaTamanhoFrase ();
    inicializaContadores();
    inicializaCronometro();
    $('#botao-reiniciar').click(reiniciaJogo);
});



function atualizaTamanhoFrase () {
    var frase = $('.frase').text();
    var numPalavras = frase.split(' ').length;
    var tamanhoFrase = $('#tamanho-frase');
    tamanhoFrase.text(numPalavras);   
}


function inicializaContadores () {
    campo.val('');

    campo.on('input', function(){
        var conteudo = (campo.val());

        var qtdPalavras = conteudo.split(/\S+/).length -1;
        $('#contador-palavras').text(qtdPalavras);

        var qtdCaracteres = conteudo.length;
        $('#contador-caracteres').text(qtdCaracteres);
    });
}


function inicializaCronometro () {
    campo.one('focus', function() {
        var cronometroId = setInterval (function() {
            tempoRestante--;
            console.log(tempoRestante);
            $('#tempo-digitacao').text(tempoRestante);
            if (tempoRestante < 1){
                campo.attr('disabled', true);
                clearInterval (cronometroId);
            };

        }, 1000);
    });
};

function reiniciaJogo () {
    campo.val('');
    $('#tempo-digitacao').text(tempoInicial);
    tempoRestante = $('#tempo-digitacao').text();
    console.log('Tempo restante = ' + tempoRestante);
    campo.attr('disabled', false);
    $('#contador-palavras').text('0');
    $('#contador-caracteres').text('0');
    inicializaCronometro();   
}
2 respostas

Oi, Sergio, tudo bem?

O seu código está correto, o cronometro inicializa ao ser clicado na caixa. O evento focus no Jquery é ativado quando clicamos dentro de onde está o focus. Veja nesse exemplo: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_focus_ref

Obrigado pela resposta, entendi. Mas aí surgiu uma outra pergunta: qual seria então a diferença entre "focus" e "click" como parâmetros da função on(), ou entre as funções focus() e click() ? Grato pela resposta!