HTML - Teclado de una letra

Teclado de una letra

Publicado por Jotadeeme (1 intervención) el 13/07/2024 04:09:32

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>

<input id="texto"/>

<div id="seleccion">
<span class="selected">minusculas</span>
<span>MAYUSCULAS</span>
</div>
<div id="letras"></div>
</body>
</html>

<script>
const minusculas="abcdefghijklmnñopqrstuvwxyz";
const mayusculas="ABCDEFGHIJKLMNÑOPQRSTUVWXYZ";

const idLetras=document.getElementById("letras");

const mostrarLetras=listadoLetras=>{
idLetras.innerHTML="";
listadoLetras.split("").map(el=>{
const span=document.createElement("span");
span.addEventListener("click", pulsarTecla);
span.innerHTML=el;
idLetras.appendChild(span);
});
}

mostrarLetras(minusculas);

function pulsarTecla(e){
const tecla=this.innerHTML;
document.getElementById("texto").value+=tecla;
}

const seleccion=document.getElementById("seleccion");

Array.from(seleccion.querySelectorAll("span")).
map(el=>el.addEventListener("click", function(){
Array.from(seleccion.querySelectorAll("span")).
map(el=>el==this ? this.classList.add("selected"): el.classList.remove("selected"));
mostrarLetras(eval(this.innerHTML.toLowerCase()));
}));

</script>

BUENAS A TODOS O LOS QUE MIREN O LES INTERESE ESTE MENSAJE
VENGO A USTEDES CON UNA CONSULTA BOBA PERO CONAULTA EN FIN
NO SOY PROGRAMADOR PERO ME DOY MAÑAS EN ALGUNAS COSILLAS
PERO A ESTE PROBLEMA NO LE ENCONTRE LA VUELTA NO PUEDO
ESTE PROGRAMITA ES UN SIMPLE RECLADO QUE MUETRAS LETRAS
TODAS LAS QUE QUIERA MINETRAS APRETE LOS BOTONES LETRA
MI PROBLEMA ES QUE NO QUIERO QUE APAREZCAN LETRA POR LETRA
YO QUIERO QUE CADA BOTON LETRA QUE TOQUE SOBRESCRIBA
OSEA REMPLAZE LA ANTERIOR QUE NO SE SUCEDAN LAS LETRAS
SINO QUE SIEMPRE QUEDE UNA LETRA EN PANTALLA POR VEZ

DESDE YA MUCHAS GRACIAS
ESPERO QUE ALGUNO SE TOME EL TIEMPO DE AYUDARME EN ESTA PAVADA
GRACIAS OTRA VEZ

Valora esta pregunta