Disparar um onclick com teclas especificas

Dacio35 · Março 11, 2015

Olá pessoal, tenho uma dúvida e gostaria de saber se alguém tem uma noção de como saná-la.

Estou fazendo um trabalho para faculdade e preciso que através de teclas do teclados, por exemplo uma tecla especifica "a" seja disparado um onclick para que através disso seja trocada uma imagem por outra específica, no caso simularia o acendimento de uma lampada trocando a imagem de uma lampada apagada por outra lampada acesa ao apertar essa tecla "a", por exemplo.

O grande problema é esse, fazer isso acontecer com o teclado, pois com o mouse já consegui fazer mas não ajuda muito.

Se alguém tiver alguma dica faça comentário, por favor. A linguagem utilizada é javascript, mas estou aberto a novas ideias. Andei pesquisando sobre a biblioteca jquery,mas ainda não há um codigo satisfatorio.

<!DOCTYPE html>

<html lang="PT-BR">
<head>

<body>

<meta charset ="UTF-8">
<style>
.on {
padding: 9px 15px;
width: 85px;
height: 40px;
font-family: arial;
font-size:medium;
font-weight: bold;
background-color: #aad450;
box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666;
border-style:groove;
cursor:pointer;
}
.off {
padding: 9px 15px;
width: 100px;
font-family: arial;
font-size:medium;
font-weight: bold;
margin-right: 55px;
background-color: #fc6;
box-shadow: inset 0 1px 10px #fff, 0 2px 30px #666;
border-style:groove;
cursor:pointer;

}
</style>
<title>Acionamento de Lâmpadas</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>

function mudaimg(){
elem = document.getElementById("imgvolume").src = "http://i.imgur.com/pDfTeZW.png";
}

function mudaimge(){
elem = document.getElementById("imgvolume").src = "http://i.imgur.com/dZZb6iQ.png";
}

$(document).bind('keydown','a', function(e) {
$("#imgvolume").trigger('click');
});

// Definir clique

$("#imgvolume").click(function mudaimg(){

});
</script>
<h1><center><font face="Arial" color="green" SIZE="10">Teste de iluminação</font></center></h1>
<TABLE align='center'>
<TR><TD><img src="http://i.imgur.com/dZZb6iQ.png" id="imgvolume"></br></TD>
</TR>
</TABLE align='center'>

<TABLE align='center'>
<TR><TD><br><a href="#"><span class="on"onclick="mudaimg()">on</span></a>
<a href="#"><span class="off"onClick="mudaimge()">off</span></a></TD>
</TR>
</TABLE align='center'>

</body>
</html>

wootzor · Março 11, 2015

Na verdade, podes simplificar um pouco o código fazendo tudo apenas com recurso a jQuery:

var turnedOn = false; //estado actual da lâmpada
$(function () {
    $(document).bind('keydown', function (e) {
        if (e.keyCode == 65) { 
            $(".on").trigger('click');
        }
    });
    $(".on").click(function () {
        turnedOn = !turnedOn;
        if (turnedOn) {
            $("#imgvolume").attr("src", "http://i.imgur.com/dZZb6iQ.png");
        } else {
            $("#imgvolume").attr("src", "http://i.imgur.com/pDfTeZW.png");
        }
    }); //click
}); //document.ready

Fica aqui um exemplo.

A lista de códigos ASCII correspondentes a cada caracter está disponível aqui.

Editado Março 11, 2015 por wootzor

Entrar

Disparar um onclick com teclas especificas

Pergunta

Dacio35

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

wootzor

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades