1

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 2

1

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.
  • Si una tecla con acento deja de ser pulsada.
    • Haz un clearTimeout del controlador.

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.

4
  • 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)
    – Criss
    el 11 jul. 2016 a las 14:40
  • @Criss Sí, claro. Puedes hacer lo mismo sólo usando los eventos onmousedown y onmouseup. 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.
    – Criss
    el 11 jul. 2016 a las 15:41
  • Me funcionó perfectamente bien! Mil gracias!
    – Criss
    el 15 jul. 2016 a las 5:18
0

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.

1
  • 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.
    – Criss
    el 11 jul. 2016 a las 14:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.