Habilitar e desabilitar o botão

Olá, Julyana! Tudo bem? =)

Acredito que o que você esteja querendo seja o opcional da aula 4. =)

Mas, vamos lá... =)

Resumindo, como você mesma disse, temos duas coisas para fazer:

• Desabilitar o botão enquanto ele digita;
• Habilitar o botão ao chegar em zero.

O primeiro caso, darei uma "roubada" e dizer que se o foco do usuário estiver no <input>, já o suficiente... Nesse caso, tudo que precisamos fazer é:

$(".campo-digitacao").on("focus", function() {
    $("#botao-reiniciar").attr("disabled", true);
}

Tudo o que fiz até o momento foi buscar o elemento com classe campo-digitacao, que se não me engano é nosso <textarea> e dizer que quando o foco estiver nele, vou fazer alguma coisa... No caso, buscar mais um elemento, agora com ID botao-reiniciar e desabilitá-lo.

Pronto! Essa foi a primeira parte! =)

Agora para a segunda... Temos que saber quanto tempo falta, pois queremos que o botão seja habilitado quando chegar em zero. Para isso, temos um <span> que nos mostra o tempo, então devemos buscá-lo! Quando chegar em zero, habilitamos o botão... Assim:

var tempo = $("#tempo-digitacao").text();
if (tempo < 1) {
    $("#botao-reiniciar").attr("disabled", false);
}

Observe que a primeira coisa foi justamente buscar o tempo. Depois verifico quando é menor que 1 e tiro o atributo disabled do botão. =)

No link que eu disponibilizei no começo da resposta está com o código completo, de fato, que na verdade é colocar esse código em uma função e chamar o clearInterval()... =)

Espero ter ajudado, mas qualquer dúvida, fique à vontade para postar uma dúvida aqui no fórum! =)

Abraço e bons estudos,

Fábio

O meu código está assim:

function inicializaCronometro(){

    var tempoRestante=$("#tempo-digitacao").text();
    campo.one("focus", function(){
        // setInterval executa uma função a cada determinado período de tempo
    $("#botao-reiniciar").attr("disabled", true);
        var cronometroID=setInterval(function(){// a variável recebe o id desse setInterval
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);

            if(tempoRestante<1){//desabilita a área de texto quando o campo for igual a zero
                campo.attr("disabled",true);
                clearInterval(cronometroID);//interrompe a contagem de um setInterval, recebendo seu id como parâmetro
                campo.addClass("campo-desativado") ;
                $("#botao-reiniciar").attr("disabled", false);

            }
        },1000);
    });
}

mas não funciona! Se eu trocar o "attr" por "addClass" ele altera a cor do botão dando a entender que ele está desabilitado, mas ele continua executando a sua função quando clicado.

Olá, Julyana!

Toma cuidado, eu vi que algumas explicações estão com um erro no código... Quando você for atrelar uma função à um evento, como focus, usamos a função on. No caso, assim:

campo.on("focus", function() {...}

Repare que não é one, mas on.

Você poderia fazer essa alteração e me avisar se funcionou? =)

Fábio

Julyana,

Ignora o que eu disse no post acima. Acabei esquecendo que o jQuery possui a função one, também... =|

Você poderia postar seu HTML aqui, também, por favor? Assim consigo lhe ajudar... =)

Fábio