Anzeige
Tutorialbeschreibung

Tastatur mit Hilfe von CSS und jQuery

Tastatur mit Hilfe von CSS und jQuery

In diesem Tutorial beschreibe ich in ein paar einfachen Schritten, wie ihr eine virtuelle Tastatur mit jQuery und CSS erstellen könnt. Diese Methode wird oft auf Online-Banking-Seiten verwendet, um Keylogger zu unterbinden. Dieses Tutorial ist für Anfanger sowie Fortgeschrittenere. Nach etwa 30 Minuten sollte die Tastatur funktionieren.

Live Demo:  http://chackstudios.com/chack/etc/keyboard/


Unser Ziel:

Bilder


Schritt 1:
Erstellt zuerst einen neuen Ordner mit 2 weiteren Ordnern. Den einen Ordner nennt ihr js, den anderen css. Im Hauptverzeichnis erstellt ihr eine index.html. Euer Ordner sollte nun so aussehen:

 

 

Bilder
Bilder

 

Schritt 2:

Öffnet die index.html mit Dreamweaver und legt erstmal den Doctype fest, damit der Browser die Tastatur richtig verarbeiten kann; in unserem Fall wäre das:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Schritt 3:

Nun öffnen wir den <head>-Tag, verknüpfen unsere css und geben den Titel an. In meinem Fall lautet der Titel Tastatur, natürlich könnt ihr ihn ändern, wie ihr wollt, dies hat keine Auswirkung auf den Code. So sollte euer head aussehen:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Keyboard</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

Schließt nun den head-Tag mit </head>

Schritt 4:

Anschließend öffnen wir den <body>-Tag und geben unsere Tasten ein; manche brauchen noch Spezialzeichen wie „!“§$%&/()=?“,  die die Standardtasten ersetzen werden. Das können wir erreichen, indem wir noch eine 2. Klasse anhängen. Euer Code sollte nun so aussehen:

<div id="container">
    <textarea id="write" rows="6" cols="60"></textarea>
    <ul id="keyboard">
    <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
    <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
    <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
    <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
    <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
    <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
    <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
    <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
    <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
    <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
    <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
    <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
    <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
    <li class="delete lastitem">delete</li>
    <li class="tab">tab</li>
    <li class="letter">q</li>
    <li class="letter">w</li>
    <li class="letter">e</li>
    <li class="letter">r</li>
    <li class="letter">t</li>
    <li class="letter">z</li>
    <li class="letter">u</li>
    <li class="letter">i</li>
    <li class="letter">o</li>
    <li class="letter">p</li>
    <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
    <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
    <li class="symbol lastitem"><span class="off"></span><span class="on">|</span></li>
    <li class="capslock">caps lock</li>
    <li class="letter">a</li>
    <li class="letter">s</li>
    <li class="letter">d</li>
    <li class="letter">f</li>
    <li class="letter">g</li>
    <li class="letter">h</li>
    <li class="letter">j</li>
    <li class="letter">k</li>
    <li class="letter">l</li>
    <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
    <li class="symbol"><span class="off">''</span><span class="on">"</span></li>
    <li class="return lastitem">return</li>
    <li class="left-shift">shift</li>
    <li class="letter">y</li>
    <li class="letter">x</li>
    <li class="letter">c</li>
    <li class="letter">v</li>
    <li class="letter">b</li>
    <li class="letter">n</li>
    <li class="letter">m</li>
    <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
    <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
    <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
    <li class="right-shift lastitem">shift</li>
    <li class="space lastitem">&nbsp;</li>
    </ul>
    </div>

Schritt 5:

Nun verknüpfen wir das jQuery-Script (das wir von den Google-Servern abgreifen) mit unserem eigenen Tastatur-Script mit 2 einfachen Code-Zeilen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/script.js"></script>

Schließt den body tag und beendet das Html-Dokument mit </html>

 

Schritt 6:

Nun begeben wir uns an die css. Geht in den zuvor erstellen css-Ordner und erstellt eine style.css mit Dreamweaver. Css sind vonnöten, damit die Tastatur aussieht wie eine Tastatur; bis jetzt sind alle Tasten normal gelistet.

Also ordnen wir nun unsere Tasten sowie das Ausgabefeld mit diesem Code:

 

    * {
    margin: 0;
    padding: 0;
    }
    body {
    font: 71%/1.5 Verdana, Sans-Serif;
    background: #eee;
    }
    #container {
    margin: 100px auto;
    width: 688px;
    }
    #write {
    margin: 0 0 5px;
    padding: 5px;
    width: 671px;
    height: 200px;
    font: 1em/1.5 Verdana, Sans-Serif;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
    #keyboard {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #keyboard li {
    float: left;
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-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 .right-shift {
    width: 109px;
    }
    .lastitem {
    margin-right: 0;
    }
    .uppercase {
    text-transform: uppercase;
    }
    #keyboard .space {
    clear: left;
    width: 681px;
    }
    .on {
    display: none;
    }
    #keyboard li:hover {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
    }

Schritt 7:

Nun haben wir die einzelnen Tasten angegeben sowie geordnet, nur passieren tut bis jetzt noch nichts - bis jetzt.

Geht in den js-Ordner und erstellt eine Script.js, die ihr mit Dreamweaver öffnet.

Damit nun alles funktioniert, wie es soll, definieren wir die einzelnen Tasten im Script wie Shift, Caps Lock etc., und was passieren soll, wenn diese gedrückt werden. Der Code:
 

$(function(){
var $write = $(''#write''),
shift = false,
capslock = false;
$(''#keyboard li'').click(function(){
var $this = $(this),
character = $this.html(); // If it''s a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass(''left-shift'') || $this.hasClass(''right-shift'')) {
$(''.letter'').toggleClass(''uppercase'');
$(''.symbol span'').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass(''capslock'')) {
$(''.letter'').toggleClass(''uppercase'');
$(''.symbol span'').toggle();
capslock = true;
return false;
}

// Delete
if ($this.hasClass(''delete'')) {
var html = $write.html();
$write.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass(''symbol'')) character = $(''span:visible'', $this).html();

if ($this.hasClass(''space'')) character = '' '';
if ($this.hasClass(''tab'')) character = " ";
if ($this.hasClass(''return'')) character = " ";
// Uppercase letter

if ($this.hasClass(''uppercase'')) character = character.toUpperCase();

// Remove shift once a key is clicked.

if (shift === true) {
$(''.symbol span'').toggle();
if (capslock === false) $(''.letter'').toggleClass(''uppercase'');
shift = false;
}

// Add the character

$write.html($write.html() + character);
});

});

 

 

 

Die Erklärung:
 

$write.html($write.html() + character); 


Schreibt den Buchstaben ins Feld.

    if ($this.hasClass(''delete''))
     {var html = $write.html();
    $write.html(html.substr(0, html.length - 1));
    return false;

Kürzt das Textfeld um einen Buchstaben. 

 

    if ($this.hasClass(''left-shift'') || $this.hasClass(''right-shift'')) {
    $(''.letter'').toggleClass(''uppercase'');
    $(''.symbol span'').toggle();
    shift = (shift === true) ? false : true;
    capslock = false;
    return false;
    Tauscht die Buchstaben in Sonderzeichen.
    if (shift === true) {
    $(''.symbol span'').toggle();
    if (capslock === false) $(''.letter'').toggleClass(''uppercase'');
    shift = false;

Hebt Shift wieder auf, wenn eine Taste gedrückt wurde.

    if ($this.hasClass(''capslock'')) {
    $(''.letter'').toggleClass(''uppercase'');
    capslock = true;
    return false;

Tauscht die Buchstaben in Sonderzeichen, solange, bis Caps wieder gedrückt wird.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von kello
  • 15.05.2010 - 11:32

sehr gutes tut. Dankeee :D

Portrait von Rembremerding
  • 09.01.2010 - 19:46

Nettes Teil, werde ich gleich mal ausprobieren

Portrait von chacki
  • 03.01.2010 - 19:22

Achja ihr könnt ganz leicht die Tastatur eindeutschen! lasst jedoch die Klassen wie sie sind.

Portrait von InYaFace
  • 03.01.2010 - 17:24

hey ^^ ich hab das mal alles nachgemacht und wenn ich die tasten drücke schreibt er das nicht ? ist das nur bei mir so oder soll das so sein ?

aber ansonsten echt top :) gefällt mir sehr :P

Portrait von chacki
  • 03.01.2010 - 19:18

wie meinst du das?

Portrait von sokie
  • 03.01.2010 - 17:08

die letzte Sache mit den Sonderzeichen habe ich nicht verstanden:
»Tauscht die Buchstaben in Sonderzeichen, solange, bis Caps wieder gedrückt wird.« !?

Portrait von chacki
  • 03.01.2010 - 19:13

Wenn du doch Caps drückst ist der Capslock so lange aktiviert bist du ihn wieder drückst. Das heißt 123 werdn wenn Capslock an ist in !"§ gewandelt solang bist du wieder Capslock drückst. Evtl. falsch ausgedrückt?

Portrait von aidan
  • 03.01.2010 - 13:03

sehr praktisch, gefällt mir!

Portrait von chacki
  • 03.01.2010 - 15:32

Vielen dank :)

x
×
×