http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FEvent%2FKey_Event
JavaScript Tutorial/Event/Key Event - История изменений
2026-04-05T02:57:25Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Key_Event&diff=8779&oldid=prev
Admin: 1 версия
2010-05-26T08:24:34Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Key_Event&diff=8778&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Display key event code in status bar (IE)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>A Simple Page</title><br />
<script language="JavaScript"><br />
<!--<br />
function press()<br />
{<br />
var char;<br />
char = String.fromCharCode(event.keyCode);<br />
window.status = "You pressed " + char;<br />
}<br />
// --><br />
</script><br />
</head><br />
<body onkeydown="press()"><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Focus lost event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Required Field</title><br />
<script type="text/javascript"><br />
window.onload=setupEvents;<br />
function setupEvents(evnt) {<br />
document.someForm.text2.onblur=checkRequired;<br />
}<br />
function checkRequired (evnt) {<br />
evnt = evnt ? evnt : window.event;<br />
var target = evnt.target ? evnt.target : evnt.srcElement;<br />
var txtInput = target.value;<br />
if (txtInput == null || txtInput == "") {<br />
document.write("value is required in field");<br />
}<br />
}<br />
</script><br />
</head><br />
<body><br />
<form name="someForm"><br />
<input type="text" name="text1" /><br /><br />
<input type="password" name="text2" /><br /><br />
<input type="hidden" name="text3" value="hidden value" /><br />
<textarea name="text4" cols=50 rows=10>The text area</textarea><br />
<input type="submit" value="Submit" /><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get key char==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Key Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;<br />
oTextbox.value += "\n charCode is " + oEvent.charCode;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Type some characters into the first textbox.</p><br />
<P><textarea id="txtInput" rows="15" cols="50"<br />
onkeypress="handleEvent(event)"></textarea></p><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get key code==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Key Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;<br />
oTextbox.value += "\n keyCode is " + oEvent.keyCode;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Type some characters into the first textbox.</p><br />
<P><textarea id="txtInput" rows="15" cols="50"<br />
onkeypress="handleEvent(event)"></textarea></p><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Is Alt pressed during the event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Key Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;<br />
oTextbox.value += "\n charCode is " + oEvent.charCode;<br />
var arrKeys = [];<br />
if (oEvent.altKey) {<br />
arrKeys.push("Alt");<br />
}<br />
oTextbox.value += "\n keys down are " + arrKeys;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Type some characters into the first textbox.</p><br />
<P><textarea id="txtInput" rows="15" cols="50"<br />
onkeypress="handleEvent(event)"></textarea></p><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Is Control pressed during the event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Key Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;<br />
oTextbox.value += "\n charCode is " + oEvent.charCode;<br />
var arrKeys = [];<br />
if (oEvent.ctrlKey) {<br />
arrKeys.push("Ctrl");<br />
}<br />
oTextbox.value += "\n keys down are " + arrKeys;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Type some characters into the first textbox.</p><br />
<P><textarea id="txtInput" rows="15" cols="50"<br />
onkeypress="handleEvent(event)"></textarea></p><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Is the Shift pressed during the event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Key Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;<br />
oTextbox.value += "\n charCode is " + oEvent.charCode;<br />
var arrKeys = [];<br />
if (oEvent.shiftKey) {<br />
arrKeys.push("Shift");<br />
}<br />
oTextbox.value += "\n keys down are " + arrKeys;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Type some characters into the first textbox.</p><br />
<P><textarea id="txtInput" rows="15" cols="50"<br />
onkeypress="handleEvent(event)"></textarea></p><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Keystroke detector==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<HTML><br />
<HEAD><br />
<TITLE>Keystroke detector</TITLE><br />
</HEAD><br />
<BODY><br />
<SCRIPT> <br />
<br />
function checkKey(e){<br />
if (e.keyCode == 84){<br />
if (navigator.appName == "Microsoft Internet Explorer")<br />
e.returnValue = false; //works with Explorer<br />
else {<br />
//deal with Navigator or Mozilla<br />
str = document.theForm.theText.value;<br />
if (str.length == 1) <br />
newstr=" ";<br />
else {<br />
newstr = str.substring(0, str.length -1);<br />
}<br />
document.theForm.theText.value = newstr; <br />
}<br />
}<br />
else { <br />
alert ("You entered the character " + String.fromCharCode(e.keyCode) + ".");<br />
}<br />
}<br />
</SCRIPT><br />
<FORM name="theForm"><br />
<INPUT type=text name="theText" onKeyDown="checkKey(event);"><br />
</FORM><br />
</BODY><br />
</HTML></source><br />
<br />
<br />
<br />
== onkeydown key event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Key Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Type some characters into the first textbox.</p><br />
<P><textarea id="txtInput" rows="15" cols="50"<br />
onkeydown="handleEvent(event)"<br />
onkeyup="handleEvent(event)"<br />
onkeypress="handleEvent(event)"></textarea></p><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== onkeypress key event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Key Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Type some characters into the first textbox.</p><br />
<P><textarea id="txtInput" rows="15" cols="50"<br />
onkeydown="handleEvent(event)"<br />
onkeyup="handleEvent(event)"<br />
onkeypress="handleEvent(event)"></textarea></p><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== onkeyup key event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Key Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Type some characters into the first textbox.</p><br />
<P><textarea id="txtInput" rows="15" cols="50"<br />
onkeydown="handleEvent(event)"<br />
onkeyup="handleEvent(event)"<br />
onkeypress="handleEvent(event)"></textarea></p><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Use String.fromCharCode to convert key event code to key event char (IE)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>A Simple Page</title><br />
<script language="JavaScript"><br />
<!--<br />
function press()<br />
{<br />
var char;<br />
char = String.fromCharCode(event.keyCode);<br />
window.status = "You pressed " + char;<br />
}<br />
// --><br />
</script><br />
</head><br />
<body onkeydown="press()"><br />
</body><br />
</html></source></div>