Toon posts:

onscreen keyboard in <form>

Pagina: 1
Acties:

vrijdag 5 november 2004 12:08

Acties:

Verwijderd

Topicstarter
Ik ben bezig met een zoekfunctie voor een informatiepunt, waarbij ik een onscreen toetsenbord wil gebruiken.

Ik heb via een JavaScript-site wat code gehaald, nu loop ik tegen het probleem aan dat, als ik het textfield binnen <form> tags plaats, het keyboard niet meer werkt, omdat het object leeg is. Heeft iemand ideeën hoe dit kan?

Hier de code van het keyboard:

tussen <head>-tags:

code:
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

<script language="JavaScript"><!-- Start
 
var lineHTML = "";
var lock = 1;
var uca  = 0;
var initial = 0;
var filter = /[a-z]/


function rkey()
{
lineHTML = "";
this.disp.value = lineHTML;
}


function skey(i)   // Großschreibung
{
if (i == "uc")
{
uca = 1;
this.capsdisp.value = "Abc";
}

if (i == "caps")
{
lock = (lock * -1);
if (lock < 0)
{
this.lockdisp.value = "ABC";
}
if (lock > 0)
{
this.lockdisp.value = "";
}
}
}

function zkey(i)   // Zeichen
{
if ((i == ",") && (uca == 1))
{
i = ";"
}
if ((i == ".") && (uca == 1))
{
i = ":"
}
if ((i == "-") && (uca == 1))
{
i = "_"
}
if ((i == "+") && (uca == 1))
{
i = "*"
}
lineHTML += i;
this.disp.value = lineHTML;
uca = 0;
this.capsdisp.value = "";
}

function ukey(i)
{
if ((i == "ä") && ((uca == 1) || (lock < 0)))
{
i = "Ä";
}
if ((i == "ö") && ((uca == 1) || (lock < 0)))
{
i = "Ö";
}
if ((i == "ü") && ((uca == 1) || (lock < 0)))
{
i = "Ü";
}

lineHTML += i;
this.disp.value = lineHTML;
uca = 0;
this.capsdisp.value = "";
}

function nkey(i)   // normale Zeichen
{

if ((uca == 1) && (filter.test(i)))
{
i = i.toUpperCase();
}
if ((lock < 0) && (filter.test(i)))
{
i = i.toUpperCase();
}
lineHTML += i;
this.disp.value = lineHTML;
uca = 0;
this.capsdisp.value = "";
}

function fkey(i) {
//alert("Funktionstaste!");
if (i == "bs")
{
lineHTML = lineHTML.slice(0, (lineHTML.length-1));
}
this.disp.value = lineHTML;
}

function ekey()
{
// alert("der Ausdruck " + lineHTML + " wird abgeschickt");
opener.vollsuche.test.value = lineHTML;

window.close();
}

</SCRIPT>


In de body:

code:
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

<table border="0" cellspacing="0" cellpadding="1">
            <tr>
                <td colspan=12>
                    <center>
                        <input type="text" name="disp" size="60" maxlength="90" value="&nbsp;">
                    </center>
                </td>
            </tr>
            <tr>
                <td colspan=12>&nbsp;
                    
                </td>
            </tr>
            
            <tr>
                <td>
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;" onClick="nkey(1)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;" onClick="nkey(2)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;" onClick="nkey(3)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;" onClick="nkey(4)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;" onClick="nkey(5)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;" onClick="nkey(6)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;" onClick="nkey(7)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;" onClick="nkey(8)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;9&nbsp;&nbsp;&nbsp;" onClick="nkey(9)">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;&nbsp;" onClick="nkey(0)">
                </td>
                <td colspan=2>
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;&larr;&nbsp;&nbsp;&nbsp;" onClick="fkey('bs')">
                </td>
            </tr>
            <tr>
                <td>
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Q&nbsp;&nbsp;&nbsp;" onClick="nkey('q')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;W&nbsp;&nbsp;&nbsp;" onClick="nkey('w')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;" onClick="nkey('e')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;R&nbsp;&nbsp;&nbsp;" onClick="nkey('r')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;T&nbsp;&nbsp;&nbsp;" onClick="nkey('t')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Z&nbsp;&nbsp;&nbsp;" onClick="nkey('z')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;U&nbsp;&nbsp;&nbsp;" onClick="nkey('u')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;" onClick="nkey('i')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;O&nbsp;&nbsp;&nbsp;" onClick="nkey('o')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;P&nbsp;&nbsp;&nbsp;" onClick="nkey('p')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Ü&nbsp;&nbsp;&nbsp;" onClick="ukey('ü')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;" onClick="zkey('+')">
                </td>
            </tr>
            <tr>
                <td >
                    <input class="cabutt" type=button value="Caps" onClick="skey('caps')">
                    
                </td>
                <td>
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;" onClick="nkey('a')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;S&nbsp;&nbsp;&nbsp;" onClick="nkey('s')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;&nbsp;" onClick="nkey('d')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;F&nbsp;&nbsp;&nbsp;" onClick="nkey('f')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;" onClick="nkey('g')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;H&nbsp;&nbsp;&nbsp;" onClick="nkey('h')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;J&nbsp;&nbsp;&nbsp;" onClick="nkey('j')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;K&nbsp;&nbsp;&nbsp;" onClick="nkey('k')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;L&nbsp;&nbsp;&nbsp;" onClick="nkey('l')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Ö&nbsp;&nbsp;&nbsp;" onClick="ukey('ö')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Ä&nbsp;&nbsp;&nbsp;" onClick="ukey('ä')">
                </td>
            </tr>
            <tr>
                <td colspan=2>
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;&uarr;&nbsp;&nbsp;&nbsp;" onClick="skey('uc')">
                </td>
                <td>
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Y&nbsp;&nbsp;&nbsp;" onClick="nkey('y')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;" onClick="nkey('x')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;" onClick="nkey('c')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;V&nbsp;&nbsp;&nbsp;" onClick="nkey('v')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;" onClick="nkey('b')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;&nbsp;" onClick="nkey('n')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;M&nbsp;&nbsp;&nbsp;" onClick="nkey('m')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;,&nbsp;&nbsp;&nbsp;" onClick="zkey(',')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;" onClick="zkey('.')">
                </td>
                <td >
                    <input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;" onClick="zkey('-')">
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        <input type="text" name="capsdisp" size="3" maxlength="4" value="">
                    </center>
                </td>
                <td>
                    <center>
                        <input type="text" name="lockdisp" size="3" maxlength="4" value="&nbsp;">
                    </center>
                </td>
                <td colspan=8>
                    <input class="cabutt" type=button value="&nbsp;" onClick="nkey(' ')">
                </td>
                <td colspan=2>
                    <input class="cabutt" type=button value="Enter" onClick="ekey()">
                </td>

            </tr>
        </table>


Beetje veel code, maar het werkt nu wel, behalve als ik het textfield 'disp' tussen <form> en </form> zet.

[ Voor 34% gewijzigd door Verwijderd op 05-11-2004 12:11 ]

vrijdag 5 november 2004 12:09

Acties:
  • AtleX
  • Registratie: Maart 2003
  • Niet online

AtleX

Tyrannosaurus Lex 🦖

Wil je de code even tussen [code] en [/code] zetten? Dat leest wat makkelijker.

Sole survivor of the Chicxulub asteroid impact.

vrijdag 5 november 2004 12:12

Acties:

Verwijderd

Topicstarter
AtleX schreef op 05 november 2004 @ 12:09:
Wil je de code even tussen [code] en [/code] zetten? Dat leest wat makkelijker.
Mijn excuses, bij deze, zie boven.

vrijdag 5 november 2004 12:13

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:17

crisp

Devver

Pixelated

Maak dan overal in je JS waar naar this.disp.value wordt verwezen er het volgende van:
JavaScript:
1

document.forms['id-van-je-form'].elements['disp'].value

Intentionally left blank

vrijdag 5 november 2004 12:21

Acties:

Verwijderd

Topicstarter
Wow!! _/-\o_

Geweldig! Dat werkt gewoon, perfect man! Hartelijk dank. Dat je dat zo snel ziet!
Nogmaals dank!

vrijdag 5 november 2004 12:41

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Even een toevoeging ;)

code:
1
2
3
4
5

document.forms['naam-van-je-form'].elements['disp'].value

of 

document.getElementById('id-van-je-form').elements['disp'].value

vrijdag 5 november 2004 12:50

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:17

crisp

Devver

Pixelated

name is deprecated voor forms, maar dit werkt gewoon in alle moderne browsers:

HTML:
1

<form id="myForm">

JavaScript:
1

document.forms['myForm']

Intentionally left blank

vrijdag 5 november 2004 13:35

Acties:

Verwijderd

Topicstarter
Nog even een toevoeging van mezelf (voor mensen die het eventueel overnemen):

code:
1

this.capsdisp.value
en
code:
1

this.lockdisp.value

worden dus ook resp.
code:
1

document.forms['id-van-je-form'].elements['capsdisp'].value
en
code:
1

document.forms['id-van-je-form'].elements['lockdisp'].value


Logisch, maar wel noodzakelijk :)
Pagina: 1
Reageer