Estoy haciendo un teclado virtual y quiero hacer que cuando se mantenga presionada una vocal por al menos 500ms, se abra un article que muestre los diferentes tipos de acentos. Sin embargo, quiero que su comportamiento sea realista. Si, por ejemplo, dejo de presionar la tecla antes de que se cumplan los 500ms, que el setTimeOut se limpie (con un clearTimeOut). ¿Alguien sabe cómo ejecutar dicha acción? ¡Gracias!
2 respuestas
Podrías hacer algo como esto:
- Define una variable donde guardarás el controlador del
setTimeout
. - Crea una función que se encargue de mostrar los acentos correspondientes.
- Si una tecla con acento se pulsa.
- Haz un
setTimeout
y que llame a la función del punto 2 y asígnaselo al controlador del punto 1.
- Haz un
- Si una tecla con acento deja de ser pulsada.
- Haz un
clearTimeout
del controlador.
- Haz un
Por ejemplo, aquí dejo una demo que cuando pulsas la tecla de la letra A por 500ms muestra los posibles acentos, pero si sólo la pulsas una vez, no aparece (para cerrar la caja de los acentos, sólo tienes que pulsar en uno de ellos):
// controlador del setTimeout
var controlador = null;
// funciones para mostrar/esconder la caja de los acentos
function muestraAcentos() {
$("#acentos").css("visibility", "visible");
}
function escondeAcentos() {
$("#acentos").css("visibility", "hidden");
}
$(document).ready(function() {
$("#texto")
// cuando se pulsa una tecla en el input
.on("keydown", function(e) {
// si es la letra 'a'
if (e.keyCode == 65) {
// mostrar los acentos
controlador = setTimeout(muestraAcentos, 500);
}
// cuando se deja de pulsar una tecla en el input
}).on("keyup", function(e) {
// si es la letra 'a'
if (e.keyCode == 65) {
// parar la muestra de los acentos
clearTimeout(controlador);
}
});
// cerrar la caja de los acentos si se pulsa en uno
$("#acentos span").on("click", escondeAcentos);
});
#acentos {
display:inline-block;
border:1px solid #ccc;
padding:5px;
visibility:hidden;
margin-bottom:2px;
}
#acentos span {
margin:5px;
}
#texto {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="acentos">
<span>A</span>
<span>Á</span>
<span>À</span>
<span>Â</span>
<span>Ä</span>
</div>
<input type="text" id="texto" />
Lo que tendrías que hacer entonces es definir qué teclas quieres que muestren la caja de los acentos y pasarlas como parámetro a la función que la muestra (de ese modo se actualizará el contenido antes de mostrarse).
Edición: si en lugar de tener un teclado físico lo que tienes es un teclado que tú mismo has creado, la idea es la misma, sólo que en lugar de utilizar los eventos onkeydown
y onkeyup
tendrías que usar onmousedown
y onmouseup
respectivamente.
// controlador del setTimeout
var controlador = null;
// funciones para mostrar/esconder la caja de los acentos
function muestraAcentos() {
$("#acentos").css("visibility", "visible");
}
function escondeAcentos() {
$("#acentos").css("visibility", "hidden");
}
$(document).ready(function() {
$(".boton")
// cuando se pulsa una tecla en el input
.on("mousedown", function(e) {
// mostrar los acentos
controlador = setTimeout(muestraAcentos, 500);
// cuando se deja de pulsar una tecla en el input
}).on("mouseup", function(e) {
// parar la muestra de los acentos
clearTimeout(controlador);
});
// cerrar la caja de los acentos si se pulsa en uno
$("#acentos span").on("click", escondeAcentos);
});
#acentos {
display:inline-block;
border:1px solid #ccc;
padding:5px;
visibility:hidden;
margin-bottom:2px;
}
#acentos span {
margin:5px;
}
#texto {
display:block;
}
.boton {
display:inline-block;
width:40px;
height:40px;
text-align:center;
line-height:40px;
background:#ccc;
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="acentos">
<span>A</span>
<span>Á</span>
<span>À</span>
<span>Â</span>
<span>Ä</span>
</div>
<input type="text" id="texto" />
<div class="boton">A</div>
En este caso, lo que haría falta es tener algún tipo de lógica para que no escriba la letra si se muestra la caja de los acentos. Pero por lo demás es bastante parecido al método anterior. Podrías leer la letra contenida en el botón que dispara el evento y entonces mostrar las letras acentuadas que correspondan.
-
Déjame decirte que tu respuesta es completamente profesional y muy adecuada a mi problema. Creo que funcionará practicamente a la perfección. Sin embargo, al ser un teclado maquetado por mi y no un soft key real, al cliquear estos no liberan un código ascii, sino su letra correspondiente. Por lo que me preguntaba: hay algún equivalente al keyup y keydown pero para eventos de mouse? (Estilo mouseenter, pero para cuando se presione o suelte el click)– Crissel 11 jul. 2016 a las 14:40
-
@Criss Sí, claro. Puedes hacer lo mismo sólo usando los eventos
onmousedown
yonmouseup
. Acabo de actualizar el ejemplo, y ya no te tendrías que preocupar por el código de la letra.– Alvaro Montoro ♦el 11 jul. 2016 a las 15:37 -
Muchas gracias por su ayuda. No tiene idea de cuanto me ayuda esto.– Crissel 11 jul. 2016 a las 15:41
-
Tienes un estupendo ejemplo en https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
var timeoutID;
function delayedAlert() {
timeoutID = window.setTimeout(slowAlert, 2000);
}
function slowAlert() {
alert("That was really slow!");
}
function clearAlert() {
window.clearTimeout(timeoutID);
}
Un poco mas de Buscador no cuesta tanto.
-
Gracias por tu tiempo en contectar. Sin embargo, y a pesar se tu "jocoso" comentario final, no respondió ni en un 1% mi pregunta (la cual NO aparece en los buscadores :) ). Si fueras tan amable de leer bien la pregunta para poder así tratar de responderla correctamente, te lo agradecería.– Crissel 11 jul. 2016 a las 14:30