Flashhilfe.de - Flash Community

Virtuelle Tastatur mit Java

 


AntwortenRegistrieren Seite1  

Jule88#1
Benutzerbild von Jule88
Beiträge: 43
Wohnort: Leonberg
Registriert: Jan 2010

25.06.2010, 12:42

Hallo Zusammen,

ich möchte gerne eine kleine virtuelle Tastatur erstellen. Zahlen, Buchstaben, Sonderzeichen und alles Löschen funktioniert bereits. Jetzt fehlt mir nur noch ein Button, um einen Schritt rückgängig zu machen, also von hinten immer ein zeichen wieder wegnehmen.

So sieht das bis jetzt aus:

ActionScript:
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
<input type="text" style="background-color: #CCCCCC;" name="mail" size="26" maxlength="50" />
<input type="submit" name="absenden" value="send" />





<table cellpadding="7">
<tr>
<td>
<input style="height:30px;width:30px;" class="button1" type="button" name="zahl" value="1" onClick="this.form.mail.value=this.form.mail.value+1">
</td>
<td>
<input style="height:30px;width:30px;" class="button1" type="button" name="zahl" value="2" onClick="this.form.mail.value=this.form.mail.value+2">
</td>

//etc.

//alles wieder löschen
<td>
<input style="height:30px;width:30px" class="button4" type="button" name="zahl" value="C" onClick="this.form.mail.value=''">
</td>
         
<td>
<input style="height:30px;width:30px" class="button3" type="button" value="a" onclick="this.form.mail.value+='a'"
</td>
<td>
<input style="height:30px;width:30px" class="button3" type="button" value="b" onclick="this.form.mail.value+='b'"
</td>

//etc.

</tr>
</table>


Hat jemand eine Idee, wie das gehen könnte?

Grüße Jule
Sleepingbeast#2
Benutzerbild von Sleepingbeast
Beiträge: 579
Wohnort: Halle
Registriert: Apr 2005

25.06.2010, 16:56

Hallo Jule,

du meinst sicher JavaScript und nicht Java...aber das nur am Rande.
Du könntest mit der substr()-Methode bei Klick auf die entsprechende Taste den bisherigen Text abzüglich des letzten Zeichens ausgeben lassen.

Ich hab mal ganz schnell was zusammengeschustert. Einfach in eine leere HTML-Datei kopieren und testen. Vielleicht erklärt sich dann besser, was ich meine.

ActionScript:
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

  <head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />

    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <link href="grafiken/favicon.ico" type="image/x-icon" rel="shortcut icon" />

    <style type="text/css">
      #textfeld {
          display:block;
          width:400px;
          height:20px;
          border:1px solid #000;
          font:12px/20px Arial;
          color:#000;
          padding:2px;
          margin:0 0 20px 0;
        }

      .tasten {
          width:20px;
          height:20px;
          font:bold 16px/20px Verdana;
          color:#000;
          text-align: center;
          display:inline-block;
          border:1px solid #000;
          background-color: #ccc;
          cursor: default;
          margin:2px;
        }
    </style>

    <script type="text/javascript">
      var derText = '';

      function writeText(taste) {
          derText = derText + document.getElementById(taste).innerHTML;
          document.getElementById('textfeld').innerHTML = derText;
        }

      function backspace() {
          derText = derText.substr(0, derText.length - 1);
          document.getElementById('textfeld').innerHTML = derText;
        }

    </script>
  </head>

  <body>
    <div id="textfeld"></div>
    <div id="t1" class="tasten" onclick="writeText(this.id)">1</div>
    <div id="t2" class="tasten" onclick="writeText(this.id)">2</div>
    <div id="t3" class="tasten" onclick="writeText(this.id)">3</div>
    <div id="t4" class="tasten" onclick="writeText(this.id)">4</div>
    <div id="t5" class="tasten" onclick="writeText(this.id)">5</div>
    <div class="tasten" onclick="backspace()">&lt;-</div>
  </body>
</html>


Patrick
_________________________________________________________
Um Rekursion wirklich zu verstehen, muss man zuerst Rekursion verstehen.
null != 'null' != 0 != '0'
Jule88#3
Benutzerbild von Jule88
Beiträge: 43
Wohnort: Leonberg
Registriert: Jan 2010

Themenautor/in

27.06.2010, 19:50

Hey Patrick,

danke für deine Anwort. Hab heut schon den ganzen Tag versucht, das ganze auf meins zu übertragen, aber bekomm es nicht hin, dass es mit den input buttons und textfeld funktioniert. Weil ich möchte es anschließend per PHP verschicken....
Jule88#4
Benutzerbild von Jule88
Beiträge: 43
Wohnort: Leonberg
Registriert: Jan 2010

Themenautor/in

27.06.2010, 21:13

Habs jetzt hinbekommen :) Ganz simpel...

ActionScript:
1<input style="height:30px;width:30px" class="button4" type="button" name="zahl" value="C" onclick="this.form.mail.value=this.form.mail.value.substr(0, this.form.mail.value.length - 1);">


Danke dir für den Tipp mit "substr"!

Grüße Jule

AntwortenRegistrieren Seite1  

Schnellantwort

Du musst registriert sein, um diese Funktion nutzen zu können.

 
Ähnliche Beiträge zum Thema
Partner Webseiten: art-and-law.de  Mediengestalter.info   phpwelt.de   Scubacube.de  
Haftungsausschluss   Datenschutzerklärung   Impressum
© 1999-2021 Sebastian Wichmann - Flashhilfe.de