Opprette et tastatur med CSS og jQuery

Noen ganger er det bare morsomt å leke med programmeringsspråkene vi kjenner, og se hva vi kan skape. Jeg trodde det kan være fint å lage et lite online-tastatur med CSS, og deretter få det til å fungere med jQuery. Tastaturet inneholder "handling" -taster (caps lock, shift og delete) som dynamisk endrer tastaturet når det klikkes. Jeg skal vise deg hvordan du bygger den i dag.

Trinn 1: Grunnleggende HTML og filer

Dette tastaturet krever mye HTML-oppsett og spiller rundt med CSS. Hver av nøklene vil bli representert av et listepost i en uordnet liste. Hver av listepostene vil ha en klasse knyttet til dem, brukt i både CSS og jQuery. De fleste klassene er bare "brev", "lastitem" eller noe lignende. Dette vil gjøre det enklere å finne ut hvilken liste gjenstand er.

Pass på at du har satt opp en mappe hvor du skal bruke dette tastaturet. I denne nye mappen, opprett en index.html-fil sammen med en css og en js-mappe. Endelig lager du en keyboard.js-fil i js-mappen og en style.css-fil i css-mappen.

I HTML-filen vil vi inkludere to JavaScript-filer og en CSS-fil. Inne i kroppsmerket vil det være a ENORM uordnet liste som inneholder alle bokstaver, tall og noen "handling" -taster. HTML-en vil også ha en textarea i den med et ID på "tastatur". Dette blir stedet der alle tegnene er lagt til. Koden nedenfor skal plasseres i index.html-filen.

        
  
 
'~
 
1!
 
2@
 
3#
 
4$
 
5%
 
6^
 
7&
 
8*
 
9(
 
0)
 
-_
 
=+
 
slette
 
tab
 
q
 
w
 
e
 
r
 
t
 
y
 
u
 
Jeg
 
o
 
p
 
[
 
]
 
\|
 
caps lås
 
en
 
s
 
d
 
f
 
g
 
h
 
j
 
k
 
l
 
;:
 
'"
 
komme tilbake
 
skifte
 
z
 
x
 
c
 
v
 
b
 
n
 
m
 
,<
 
.>
 
/?
 
skifte
  
 
    

Du trenger ikke å bekymre deg for mye om klassene på listepostene for nå. Jeg vil forklare dem mer når vi bruker jQuery. Men noen av klassene (som høyre-shift og lastitem) er bare der på grunn av CSS vi skal bruke.

Trinn 2: Gjør listen ganske

JavaScript for tastaturet ville fungere perfekt bra uten noen CSS, men det ville ikke se ut som et tastatur. Jeg kommer ikke til å forklare hver stil fordi mange av dem er ganske selvforklarende, men det er et par som jeg vil gå over. Lagre følgende CSS i filen style.css i css-mappen.

* margin: 0; polstring: 0;  kropp font: 71% / 1.5 Verdana, Sans-Serif; bakgrunn: #eee;  #container margin: 100px auto; bredde: 688px;  #write margin: 0 0 5px; polstring: 5px; bredde: 671px; høyde: 200px; font: 1em / 1.5 Verdana, Sans-Serif; bakgrunn: #fff; grense: 1px solid # f9f9f9; -moz-grense-radius: 5px; -webkit-grense-radius: 5px;  #keyboard margin: 0; polstring: 0; listestil: none;  #keyboard li float: left; margin: 0 5px 5px 0; bredde: 40px; høyde: 40px; linjehøyde: 40px; tekst-align: center; bakgrunn: #fff; grense: 1px solid # f9f9f9; -moz-grense-radius: 5px; -webkit-grense-radius: 5px;  .capslock, .tab, .left-shift clear: left;  #keyboard .tab, #keyboard .delete width: 70px;  #keyboard .capslock width: 80px;  #keyboard .return width: 77px;  #keyboard .left-shift width: 95px;  #keyboard. rett-shift width: 109px;  .lastitem margin-right: 0;  .uppercase text-transform: store bokstaver;  #keyboard. space clear: left; bredde: 681px;  .on display: none;  #keyboard li: svever posisjon: relative; topp: 1px; igjen: 1px; border-farge: # e5e5e5; markør: pointer; 

Vær oppmerksom på følgende stiler fordi de er veldig viktig.

• .på - I noen av listepostene er det to spenner. Dette er nøklene som har mer enn ett tegn per nøkkel; som tallene. Spenningen med klassen vil bli skjult. Dette endret seg når en bruker klikker på shift-tasten, men mer på det senere med JavaScript.
• .Lastitem - Den siste jeyen i en hvilken som helst rad vil ha sin høyre margin nullet ut, slik at oppsettet ikke vil bryte.

Trinn 3: Ta med tastene til livet

Hvis du skulle klikke på en liste, ville ingenting skje. Vi er i ferd med å fikse det med litt jQuery. Hovedideen vi skal bruke, er å legge ved en klikkbehandler til hver av listepostene, ta tak i teksten når den klikkes, og gjør litt magi til det avhengig av listen elementets klasse. Herfra vil all JavaScript-koden gå inn i keyboard.js-filen.

Oppsettet

Vi må åpne jQuery og definere tre variabler som skal brukes gjennom koden. Disse variablene er tekstområdet, en skiftstatus og en Cap Lock-status.

$ (funksjon () var $ write = $ ('# write'), shift = false, capslock = false; // Resten av koden går her.);

Det som kommer neste er å feste klikkbehandleren til alle listepostene (nøkler). To variabler er oppsett når nøkkelen klikkes. $ dette er definert bare for å kreves mindre å skrive fra oss, og karakter er definert som HTML for listen elementet. Hvis listeposten er et brev, vil ingenting skje med denne variabelen, og det vil bli returnert.

$ ('# keyboard li'). klikk (funksjon () var $ this = $ (dette), karakter = $ this.html (); // Hvis det er et lite bokstav, skjer ingenting med denne variabelen // Kode for behandler nøkkelen.);

Skiftnøkkelen og Caps Lock

Hvis skiftnøkkelen (listeposter med klassen "left-shift" eller "right-shift") klikkes, vil vi bytte ut "stor bokstav" av hvert brev. Så for listepostene med en klasse av "symbol", vil vi bytte mellom skjermbildet mellom de nestede span-kodene. Det vi vil gjøre neste er satt skift til motsatt boolesk verdi (hvis det er sant, sett det til falskt og omvendt), og capsene låses variabelt til falsk, og returnerer til slutt falsk for ikke å gjøre noe annet med tegnvariabelen.

// Skift nøkler hvis ($ this.hasClass ('left-shift') || $ this.hasClass ('right-shift')) $ ('. Brev'). ToggleClass ('store bokstaver'); $ ('. symbol span'). veksle (); shift = (shift === true)? usann sannhet; capslock = false; returner falsk; 

Nå, hvis kapslingsnøkkelen er klikket, vil vi bytte ut "store" -klassen på brevlisteelementer; sett låsevariabelen til true; og returner falsk.

// Caps lås hvis ($ this.hasClass ('capslock')) $ ('. Letter'). ToggleClass ('store bokstaver'); capslock = true; returner falsk; 

Slett nøkkelen

For slettingsnøkkelen må vi tilordne en annen variabel: html - innholdet i det som er i tekstområdet. Når vi har det, setter vi den nye HTML-teksten til alt annet enn det siste tegnet. Dette gjøres med JavaScript-substr-metoden. Igjen returnerer vi falske for ikke å kjøre noe annet.

// Slett hvis ($ this.hasClass ('delete')) var html = $ write.html (); $ write.html (html.substr (0, html.length - 1)); returner falsk; 

Spesielle karakterer

For alle listepostene som ikke er et brev og ikke er en av "handlingene" -tastene, endrer vi tegnvariabelen til noe spesielt. For et listepunkt med "symbol" -kursen, er tegnet satt til innholdet i hvilket spekter som er synlig. Et mellomrom er (åpenbart) brukt til mellomromstasten. Fane karakteren er representert av \ t, og til slutt er en ny linje (returnøkkel) \ n.

// Spesialtegn hvis ($ this.hasClass ('symbol')) karakter = $ ('span: synlig', $ dette) .html (); hvis ($ this.hasClass ('space')) karakter = "; hvis ($ this.hasClass ('tab')) karakter =" \ t "; hvis ($ this.hasClass ('return')) karakter =" \ n ";

Store bokstaver

Hvis du kan huske at når vi håndterte shift- og caps-låsene, ble en "stor" -klasse enten lagt til eller fjernet ved hjelp av toggleClass-funksjonen. Hvis den store bokstaven er funnet, konverteres tegnet til sin store bokstav ved hjelp av toUpperCase-metoden.

// Stor bokstav hvis ($ this.hasClass ('store bokstaver')) karakter = character.toUpperCase ();

The Aftermath

På et vanlig tastatur trenger du vanligvis bare skiftnøkkelen for ett brev. Hvis skiftvariabelen er funnet å være satt, vil vi bytte ut skjermen av symbolets spenner. Det som også skjer er at hvis kapslåsnøkkelen er "på", skrives brevene igjen mellom store og små bokstaver.

For å avslutte, er tegnet lagt til tekstområdet, og brukeren kan fortsette å "skrive".

// Fjern skift når en tast er klikket. hvis (shift === true) $ ('.symbol span'). veksle (); hvis (capslock === false) $ ('. letter'). toggleClass ('store bokstaver'); shift = false;  // Legg til tegnet $ write.html ($ write.html () + tegn);

Endelig JavaScript-kode

$ (funksjon () var $ write = $ ('# skriv'), shift = false, capslock = false; $ ('# keyboard li'). klikk (funksjon () var $ this = $ (dette) tegn = $ this.html (); // Hvis det er en liten bokstav, skjer ingenting med denne variabelen // Skifttastene hvis ($ this.hasClass ('left-shift') || $ this.hasClass ('right-shift ')) $ ('. bokstav '). toggleClass (' store bokstaver '); $ (' .symbol span '). skift (); skift = (skift === sant)? false: true; capslock = false; returner false; // Caps lås hvis ($ this.hasClass ('capslock')) $ ('. letter'). toggleClass ('store bokstaver'); capslock = true; return false; // Slett hvis this.hasClass ('delete')) var html = $ write.html (); $ write.html (html.substr (0, html.length - 1)); return false; // Spesialtegn hvis this.hasClass ('symbol')) karakter = $ ('span: synlig', $ dette) .html (); hvis ($ this.hasClass ('space')) karakter = "; hvis ($ this.hasClass 'tab')) karakter = "\ t"; hvis ($ this.hasClass ('return')) karakter = "\ n"; // Stor bokstav hvis ($ this.hasClass ('store bokstaver')) karakter = karakter r.toUpperCase (); // Fjern skift når en tast er klikket. hvis (shift === true) $ ('.symbol span'). veksle (); hvis (capslock === false) $ ('. letter'). toggleClass ('store bokstaver'); shift = false;  // Legg til tegnet $ write.html ($ write.html () + tegn); ); );

Konklusjon

Noen ganger er det fint å spille rundt, selv om det endelige produktet ikke er virkelig "ekte verden". Ved å bruke noen få klasser til våre listeposter, var vi i stand til å lage et CSS og jQuery-drevet tastatur. Klaviaturet er ikke helt ubrukelig. Jeg har sett nettsteder der det er et alternativ for et tastatur på skjermen. Men det meste gjør det mulig for oss å få en bedre forståelse av evnen til CSS og jQuery.

• Følg oss på Twitter, eller abonner på NETTUTS RSS Feed for flere daglige webutviklingsverktøy og artikler.