già che ci siamo... fatti questa pagina HTML...
per ogni tasto che premi ti dice il corrispettivo KEYPRESS !!!
ps.. Non l'ho fatta io...
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>DHTML Tutorial</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"><LINK
href="DHTML Tutorial_file/stylesheet.css" type=text/css rel=stylesheet>
<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY onkeypress=GetChar() onkeydown=GetCode()>
<DIV class=divhead>Capturing Keystrokes</DIV>
It can be useful to determine which keys are being pressed on the keyboard
and to take action on them. If data entry for a textbox, for example, should be
restricted to numbers, then scripts can monitor the key presses and permit only
number keys to enter digits. In positioning elements on a page, arrow keys can
be used to incrementally move the object across the page.</P>
<SPAN class=head2>The event Object</SPAN></P>
The event object contains information about user or system events
occuring within the browser. Among the types of events that are trapped are
keystroke and mouse events occuring on the screen, in the browser window, in the
document, or associated with any HTML element on the page. Any action
surrounding the page is always represented by a property setting in the event
object.</P>
All keystroke events generate a <SPAN class=code>keyCode</SPAN>
property setting. This property is an integer value representing the particular
key that is pressed, and it is accessible by a script through the <SPAN
class=code>event.keyCode</SPAN> property.</P>
<SPAN class=head2>Keyboard Event Handlers</SPAN></P>
A key press is captured by two event handlers which return slightly different
<SPAN class=code>keyCode</SPAN> values.</P>
<TABLE cellPadding=3 border=1>
<TBODY>
<TR>
<TH>Event Handler</TH>
<TH>Returned Value</TH></TR>
<TR>
<TD class=code>onKeyDown</TD>
<TD>Returns the integer <SPAN class=code>keyCode</SPAN> representing the
value associated with the physical key</TD></TR>
<TR>
<TD class=code>onKeyPress</TD>
<TD>Returns the integer <SPAN class=code>keyCode</SPAN> representing the
Unicode value of the character associated with the key</TD></TR></TBODY></TABLE>
Every key has a unique <SPAN class=code>keyCode</SPAN> value identifying the
particular key that is pressed. This value is returned by the <SPAN
class=code>onKeyDown</SPAN> handler. Keys that produce alphnumeric
characters have <SPAN class=code>keyCode</SPAN> values identifying the
associated characters. These Unicode values are returned by the <SPAN
class=code>onKeyPress</SPAN> handler.</P>
For character keys, a <SPAN class=code>keypress</SPAN> event can produce the
same <SPAN class=code>keyCode</SPAN> for two different keys, even though a <SPAN
class=code>keydown</SPAN> event produces different codes. For example, the "1"
key along the top of the keyboard produces a <SPAN class=code>keyCode=49</SPAN>
when <SPAN class=code>onKeyDown </SPAN>captures the keystroke. The "1" key on
the numeric keypad, however, produces a <SPAN class=code>keyCode=97</SPAN> since
this is a physically different key. Both keys, though, produce a <SPAN
class=code>keyCode=49</SPAN> when captured with <SPAN
class=code>onKeyPress</SPAN> since the "1" character is produced by both
keys.</P>
<SCRIPT>
function GetCode()
{
document.all.KeyCode.innerText = event.keyCode
document.all.KeyChar.innerHTML = ""
document.all.Character.innerHTML = ""
}
function GetChar()
{
document.all.KeyChar.innerText = event.keyCode
var Character = event.keyCode
document.all.Character.innerText = String.fromCharCode(Character)
}
</SCRIPT>
<TABLE
style="FLOAT: right; MARGIN-LEFT: 20px; POSITION: relative; BORDER-COLLAPSE: collapse"
cellPadding=3 border=1>
<TBODY>
<TR>
<TH colSpan=2>keyCode</TH>
<TH vAlign=bottom rowSpan=2>Character</TH></TR>
<TR>
<TH>onKeyDown</TH>
<TH>onKeyPress</TH></TR>
<TR align=middle>
<TD><SPAN id=KeyCode></SPAN></TD>
<TD><SPAN id=KeyChar></SPAN></TD>
<TD><SPAN id=Character></SPAN></TD></TR></TBODY></TABLE>
The relationships between the <SPAN class=code>keyCodes</SPAN> produced by
the two events are given in the accompanying table. Press any key to view its
codes along with the character that is represented by the key.</P>
<SPAN class=head2>Capturing keyCodes with onKeyDown</SPAN></P>
If you have a textbox for entry of, say, numeric characters, you can check
the user's keystrokes to make sure that only numbers are entered into the box.
One solution involves associating (binding) the <SPAN
class=code>onKeyDown</SPAN> event hander with the textbox to capture the <SPAN
class=code>keyCode</SPAN> for the physical key that is pressed. If the <SPAN
class=code>keyCode</SPAN> is not one of the number keys, then entry is not
permitted.</P>
The following textbox works in this fashion. Enter numbers or other
characters into the box. Only numbers or a hyphen are permitted.</P>Zip Code:
<INPUT onkeydown="return CheckKeyCode()" style="WIDTH: 100px" size="20">
<SCRIPT>
function CheckKeyCode()
{
if( (event.keyCode == 189 || event.keyCode == 109) ||
(event.keyCode >= 48 && event.keyCode <= 57) ||
(event.keyCode >= 96 && event.keyCode <= 105) ) {
return true }
else {
return false
}
}
</SCRIPT>
<DIV class=divcode><SPAN class=script><SCRIPT>
function
CheckKeyCode()
{
if( (event.keyCode == 189 || event.keyCode ==
109) ||
(event.keyCode >= 48 &&
event.keyCode <= 57) ||
(event.keyCode >= 96 &&
event.keyCode <= 105) ) {
return true
}
else {
return
false
}
}
</SCRIPT>
</SPAN>
Zip Code: <input
type="text" style="width:100px"
onKeyDown=<SPAN
class=script>"return CheckKeyCode()"</SPAN>/>
</DIV>
The textbox includes an <SPAN class=code>onKeyDown</SPAN> event hander to
respond to a keystroke and the capture the <SPAN class=code>keyCode</SPAN> for
the physical key that is pressed. A function call is made to <SPAN
class=code>CheckKeyCode()</SPAN>, which returns <SPAN class=code>true</SPAN>
(enter the keystroke into the textbox) or <SPAN class=code>false</SPAN> (do not
enter the keystroke into the textbox) depending on whether or not a number key
or a hyphen is typed.
As you type in the above textbox these keyboard events are being recorded in
the event object as the <SPAN class=code>event.keyCode</SPAN> property.
Therefore, the script tests this property to discover which key was pressed. The
number keys along the top of the keyboard have <SPAN class=code>keyCode</SPAN>
values of <SPAN class=code>48</SPAN> - <SPAN class=code>57</SPAN> for the "0"
through "9" keys. The keys on the number pad have <SPAN
class=code>keyCode</SPAN> values of <SPAN class=code>96</SPAN> - <SPAN
class=code>105</SPAN> for the ten number keys. The hyphen key at the top of the
keyboard has a <SPAN class=code>keyCode</SPAN> value of <SPAN
class=code>189</SPAN>; the minus (<SPAN class=code>-</SPAN>) key on the number
pad (used also as a hyphen) has a <SPAN class=code>keyCode</SPAN> of <SPAN
class=code>109</SPAN>.</P>
These are the valid <SPAN class=code>keyCode</SPAN> values checked in the
script. If any of these keys are pressed, the function returns <SPAN
class=code>true</SPAN> and the keystroke produces the character in the textbox.
Otherwise, the function returns <SPAN class=code>false</SPAN> and the character
is not produced.</P>
<SPAN class=head2>Capturing keyCodes with onKeyPress</SPAN></P>
The <SPAN class=code>onKeyPress</SPAN> event handler produces <SPAN
class=code>keyCodes</SPAN> representing the character that is typed. For
non-character keys no <SPAN class=code>keyCode</SPAN> is produced. These
character <SPAN class=code>keyCodes</SPAN> represent the Unicode values of the
characters and present a second way to check for valid entry into a textbox.</P>
The following textbox, for example, only permits entry of upper-case
alphabetic characters.</P>State Code:
<INPUT onkeypress="return CheckAlpha()"
style="WIDTH: 25px" maxLength=2 size="20">
<SCRIPT>
function CheckAlpha()
{
if (event.keyCode >= 65 && event.keyCode <= 90) {
return true }
else {
return false
}
}
</SCRIPT>
<DIV class=divcode><SPAN class=script><SCRIPT> function
CheckAlpha()
{
if (event.keyCode >= 65 &&
event.keyCode <= 90) {
return true
}
else {
return
false
}
}
</SCRIPT>
</SPAN>
State Code:
<input type="text" style="width:25px"
maxlength="2"
onKeyPress=<SPAN class=script>"return
CheckAlpha()"</SPAN>/>
</DIV>
</P>
Since an <SPAN class=code>onKeyPress</SPAN> event handler is used with the
textbox, the <SPAN class=code>keyCode</SPAN> values are the character codes
associated with the keys. The characters <SPAN class=code>"a" - "z"</SPAN> have
<SPAN class=code>keyCodes</SPAN> of <SPAN class=code>97 - 122</SPAN>; the
upper-case characters <SPAN class=code>"A" - "Z"</SPAN> have <SPAN
class=code>keyCodes</SPAN> of <SPAN class=code>65 - 90</SPAN>. These latter
codes are checked by the script to return <SPAN class=code>true</SPAN> or <SPAN
class=code>false</SPAN>.</P>
<SPAN class=head2>Checking Characters</SPAN></P>
A third way of testing keystrokes is to discover the actual character that is
typed. This method uses the <SPAN class=code>onKeyPress</SPAN> event handler to
get the Unicode values, which are then converted to ASCII characters. The
following textbox perform the same function as the previous textbox except that
the script checks for the characters "A" through "Z" rather than the codes 65
through 90.</P>State Code:
<INPUT onkeypress="return CheckCharacter()"
style="WIDTH: 25px" maxLength=2 size="20">
<SCRIPT>
function CheckCharacter()
{
if (String.fromCharCode(event.keyCode) >= "A" && String.fromCharCode(event.keyCode) <= "Z" ) {
return true }
else {
return false
}
}
</SCRIPT>
<DIV class=divcode><SPAN class=script><SCRIPT> function
CheckCharacter()
{
if (String.fromCharCode(event.keyCode)
>= "A" &&
String.fromCharCode(event.keyCode) <=
"Z" ) {
return true }
else
{
return
false
}
}
</SCRIPT>
</SPAN>
State Code:
<input type="text" style="width:25px"
maxlength="2"
onKeyPress=<SPAN class=script>"return
CheckCharacter()"</SPAN>/>
</DIV>
</P>
Unicode values are converted to ASCII characters with the <SPAN
class=code>String.fromCharCode(Unicode)</SPAN> method. The
supplied Unicode value is return as the keyboard character. In the above
script, the <SPAN class=code>event.keyCode</SPAN> is returned as its associated
character and checked whether it falls in the range <SPAN
class=code>"A"-"Z"</SPAN>.</P>
ELENCO CARATTERI SPECIALI ( chr ) :</P>
<font class="contentFont"><font class="codeFont"><font color="#ff0000">
<font class="regularFont">Chr(33) = !
Chr(34) = "
Chr(35) = #
Chr(36) = $
Chr(37) = %
Chr(38) = &
Chr(39) = '
Chr(40) = (
Chr(41) = )
Chr(42) = *
Chr(43) = +
Chr(44) = ,
Chr(47) = /
Chr(58) = :
Chr(59) = ;
Chr(60) = <
Chr(61) = =
Chr(62) = >
Chr(63) = ?
Chr(91) = [
Chr(92) = \
Chr(93) = ]
Chr(94) = ^
Chr(96) = `
Chr(123) = {</font></font></font></font></P>
</BODY></HTML>
Permessi di invio
Rispondi quotando