Limpar caixa de texto (input) com tecla ESC – jQuery

Outro dia um cliente me pediu para limpar a caixa de texto ao apertar a tecla ESC, como é nos softwares de planilhas eletrônicas. Cheguei a uma conclusão simples, confere aí:

Pensei em não apenas limpar o campo, mas no caso de uma edição de dados voltaria o valor que estava.
Sendo assim eu precisaria salvar o dado do input assim que se fizesse o focus, além é claro de já selecionar o valor pra facilitar a edição.

O código é simples:

$(document).ready(function(){

    $('input[type="text"]').on("focus", function(e){
        var thisValue = $(this).val();
        $(this).attr("data-recover", thisValue);
        $(this).select();
    });

    $('input[type="text"]').keyup(function(e){
        var dataRecover = $(this).attr("data-recover");
        if(e.keyCode == 27) {
            $(this).val(dataRecover);
        }
    });

});

Note que usamos jQuery. 🙂

Ao efetuar o “focus” no campo input do tipo texto, pegamos o valor do input a colocamos dentro de um parâmetro (data-recover) no próprio campo de texto.
Ficamos analisando toda tecla que é pressionada, caso a tecla seja ESC (código 27), então substituímos o valor digitado pelo valor que salvamos em “data-recover”.
Simples assim!

Artigos Relacionados

Trabalhando com spritesheets Uma das melhores técnicas tanto para jogos quanto para a web, sem dúvida é o spritesheet. Pois ao invés de carregar as imagens uma a uma na memória, e...
Problemas ao conectar no MySQL 5.7 Está recebendo mensagens de erro de conexão do tipo "#1698 - Access denied for user 'root'@'localhost'...". Isso é coisa da versão do seu MySQL. Mas ...
Sprites e Tiles grátis para usar em seus jogos #1 Procurar e encontrar o que deseja é muito bom, não é? Se for grátis então... vix! Dando aquela vasculhada pela internet encontrei sprites de q...

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *