Pode fazer apenas com CSS:
.show_key{display:none;}
[name=senha]:focus + .show_key{
display: block;
}
<input class="input" name="senha" type="password" placeholder="Digite a senha" value="">
<div class="show_key">Mostrar senha</div>
Como a div é adjacente ao input, o selector + .show_key
irá alterar a sua propriedade ao focar o campo.
##Edit
Edit
Usando jQuery para exibir a div quando houver ao menos 1 caractere no campo e mostrar a senha ao clicar na div "Mostrar senha":
$(document).ready(function(){
// captura os eventos keyup e focus no campo
$("[name=senha]").on("keyup focus", function(){
// mostra/esconde a div se houver ao menos 1 caractere
$(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
});
// captura os eventos de mouse no campo e na div
$(".show_key, [name=senha]").on("click mousedown mouseup mouseleave", function(e){
// cancela a bubbling do evento click no "document"
e.stopPropagation();
// altera o type do campo
$("[name=senha]")
.attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
});
// esconde a div ao clicar em qualquer parte do documento
$(document).on("click", function(){
$(".show_key").hide();
});
});
.show_key{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input" name="senha" type="password" placeholder="Digite a senha" value="">
<div class="show_key">Mostrar senha</div>