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.