> Faqs > Teclado virtual para escribir letras con acentos que no tenemos en español

Teclado virtual para escribir letras con acentos que no tenemos en español

Estoy a tascado en un desarrollo y no logro ver la luz. Os cuento, tengo que dar la posibilidad de introducir en un diccionario letras acentuadas que en principio no tengo en el teclado en castellano (c con acento, etc.)

Quiero poner una especie de teclado virtual con estas letras para que se pulsen y queden escritas en un campo de texto.

¿A alguno le ha tocado hacer esto antes?

Respuestas

Puedes hacer un teclado virtual con una serie de botones. Luego los recorres con Javascript para asignarles un evento que permita agregar el caracter necesario a la web.

Lo primero que necesitas es asegurarte que usas UTF-8 en la codificación del documento web HTML. Esto lo defines en el documento básico de HTML5 y luego guardando el archivo como utf-8 con el editor que uses. Con este primer paso ya puedes empezar a usar en tu web caracteres de esos raros que no tenemos en el idioma español ni en el teclado.

Campo de texto y botones del teclado virtual

Ahora tienes el HTML del campo de texto y del teclado virtual:

<p>
  <input type="text" id="targettext">
</p>
<div class="virtualkeyboard">
  <input type="button" class="virtualkey" data-char="Æ" value="Æ">
  <input type="button" class="virtualkey" data-char="å" value="å">
</div>

El campo de texto tiene su identificador para poder referirnos a él.

Luego tienes los botones, que no hace falta identificador para cada uno, sino que vamos a acceder a ellos en un bucle por medio de su clase. Cada botón tiene un data-attribute para definir la tecla que deberían "pulsar virtualmente" para escribirla sobre el campo de texto.

Para que se parezca más a un teclado ya simplemente necesitas aplicar algo de CSS:

.virtualkeyboard {
  margin: 1rem 0;
  padding: 1rem;
  background: #eee;
  width: 200px;
  text-align:center;
}
.virtualkey {
  background: #444;
  color: #fff;
  border: none;
  border-radius: 0.3rem;
  padding: 0.3rem 0.4rem;
}

Asociar el evento click a las teclas del teclado virtual

Luego hacemos un recorrido para asignar un evento clic a todos los botones:

var targetElement = document.getElementById('targettext');

document.querySelectorAll(".virtualkey").forEach(function(item) {
  item.addEventListener('click', function() {
    console.log(item.dataset.char);
    targetElement.value += item.dataset.char;
  })
})

Con esto ya tienes la funcionalidad necesaria en tu teclado virtual y se escribirán los caracteres que necesitas en el campo de texto. Puedes tener cualquier número de botones, pues funcionará igualmente. Solo necesitas asegurarte que todos los botones tengan:

  • La clase CSS "virtualkey"
  • Un data attribute definido con data-char="å" obviamente, colocando el caracter que necesites para esa tecla del teclado virtual.

Puedes ver aquí cómo acceder a los data-attributes. Aunque ahora que lo pienso podrías simplemente usar el value del propio botón para saber qué caracter tienen asociado. Pero bueno, con el data attribute te aseguras que puedes usar cualquier tipo de etiqueta para este teclado virtual, incluso imágenes si fuera necesario.

Sergio
366 11 32 13

Lo que tienes que hacer es tener la imagen del carácter…

Y escribirlo en tu página, luego la asocias con javascript a donde quieras…

Por ejemplo la letra Ü

Entonces dices

Onclick=”elemento.value+=’Ü’;”

Vega Eudy