4
respostas

CAMPO DESATIVADO AINDA CONTINUA DIGITANDO

Quando eu estou digitando e clico no botão reiniciar o campo fica cinza porém continua digitando, já tentei achar o bug e não encontrei, alguém pode me ajudar

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

$(function() {
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    $("#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.on("input", function() {
        var conteudo = campo.val();

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

        var qteCaracteres = conteudo.length;
        $("#contador-caracteres").text(qteCaracteres);
    });
};

function inicializaCronometro(){
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function() {
    var cronometroID = setInterval(function() {
        tempoRestante--;
        $("#tempo-digitacao").text(tempoRestante);
        if(tempoRestante < 1) {
            campo.attr("disabled", true);
            clearInterval(cronometroID);
            campo.toggleClass("campo-desativado");
        }
    }, 1000);
});
};

function inicializaMarcadores() {
    var frase = $(".frase").text();
    campo.on("input" , function() {
        var digitado = campo.val();
        var comparavel = frase.substr(0 , digitado.length);


        if(digitado == comparavel) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        } else {
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }
    });
};

function reiniciaJogo() {
    campo.attr("disabled", false);
    campo.val(" ");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
    campo.toggleClass("campo-desativado");

    campo.removeClass("borda-vermelha");
    campo.addClass("borda-verde");
};
4 respostas

Neto, boa tarde!

Na função de reinicializar jogo, tente alternar.

campo.attr("disabled", false);
    campo.val(" ");

para

campo.attr("disabled", false);
    campo.val(" ");

E remova o espaço dentro de campo.val(" ");

Espero ter ajudado e bons estudos!

Felipe, obrigado...Deu certo.... Por qual motivo o espaço interfere no funcionamento?

Neto, boa tarde!

Pois o contador considera que se tiver qualquer caracter ele já deve iniciar a contagem, e o espaço é considerado um caracter

Espero ter ajudado e bons estudos!

Obrigado Felipe, Pode me auxiliar em mais um coisa ? Quando eu clico no botão reiniciar o textarea fica com o fundo cinza porém ainda digita, e se eu clico novamente ele fica branco e continua digitando, e também parece que fica com 2 contadores e quando termina a contagem o textarea não bloqueia. Quando eu fecho e abro o página o textarea já vem bloqueado e só desbloqueia se eu apertar reiniciar. Quero uma dica de como eu conserto o código.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software