Código de JavaScript - Simple teclado en pantalla

Imágen de perfil
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Simple teclado en pantallagráfica de visualizaciones


JavaScript

Publicado el 15 de Agosto del 2020 por Joel (150 códigos)
2.575 visualizaciones desde el 15 de Agosto del 2020
Este código muestra un simple teclado en pantalla en formato qwerty o en abecedario. Solo permite introducir los caracteres que hay en el teclado de la pantalla.

teclado-pantalla

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 15 de Agosto del 2020gráfica de visualizaciones de la versión: Versión 1
2.576 visualizaciones desde el 15 de Agosto del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
    <head>
        <meta charset="utf-8">
        <style>
            * {
                font-family: Arial, Helvetica, sans-serif;
            }
            #teclado {
                width:590px;
                background-color: #aaa;
                overflow: hidden;
            }
            #letras>span {
                padding:10px;
                width: 55px;
                text-align: center;
                margin:2px;
                float:left;
                cursor:pointer;
                border-radius: 3px;
                background-color:white;
                box-sizing: border-box;
            }
            #letras>span.space {
                width: calc( 100% - 4px);
            }
            #letras>span.space::after {
                content:"espacio";
            }
            #disposicionTeclado {
                clear: both;
            }
            #disposicionTeclado>span {
                color:gray;
                cursor:pointer;
            }
            #disposicionTeclado .selected {
                font-weight: Bold;
                color:black;
                cursor:inherit;
            }
            input {
                margin:20px 0;
            }
        </style>
    </head>
 
    <body>
 
        <input type="text" id="texto">
 
        <div id="teclado">
            <div id="letras"></div>
        </div>
        <div id="disposicionTeclado"><span class="selected">Querty</span> <=> <span>Abecedario</span></div>
 
    </body>
</html>
 
<script>
const abecedario = "1234567890abcdefghijklmnñopqrstuvwxyzç., ";
const querty = "1234567890qwertyuiopasdfghjklñzxcvbnmç., ";
 
const idLetras=document.getElementById("letras");
const idDisposicionTeclado=document.getElementById("disposicionTeclado");
 
// funcion para mostrar las letras
// tiene que recibir el listado de letras a mostrar
const mostrarLetras = listadoLetras => {
    idLetras.innerHTML="";
    // añadimos las letras
    listadoLetras.split('').map(el => {
        let span=document.createElement("span");
        span.addEventListener("click", teclaPulsada);
        span.innerText=el;
        if (el==" ") {
            span.classList.add("space");
        }
        idLetras.appendChild(span);
    });
}
// por defecto indicamos que muestre el teclado querty
mostrarLetras(querty);
 
// función que recibe la pulsación de la tecla
// tanto del teclado fisico como del teclado dibujado en la pantalla
function teclaPulsada(e) {
    const tecla=this.classList && this.classList.contains("space") ? " " : this.innerText;
    if (abecedario.indexOf(tecla)>=0) {
        document.getElementById("texto").value+=tecla;
    }
}
 
// creamos un evento por si el usuario quiere cambiar el estilo del teclado
// entre querty o abecedario
Array.from(idDisposicionTeclado.querySelectorAll("span")).map(el => el.addEventListener("click", function() {
    // añadimos el estilo .selected al elemento seleccionado
    Array.from(idDisposicionTeclado.querySelectorAll("span")).map(el => el == this ? this.classList.add("selected") : el.classList.remove("selected"));
    mostrarLetras(eval(this.innerText.toLowerCase()));
}));
 
</script>



Comentarios sobre la versión: Versión 1 (1)

Imágen de perfil
17 de Agosto del 2020
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s6417