JavaScript Tutorial/Event/Key Event

Материал из Web эксперт
Перейти к: навигация, поиск

Display key event code in status bar (IE)

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function press()
{
    var char;
    char = String.fromCharCode(event.keyCode);
    window.status = "You pressed " + char;
}
//  -->
</script>
</head>
<body onkeydown="press()">
</body>
</html>


Focus lost event

<html>
<head>
<title>Required Field</title>
<script type="text/javascript">
window.onload=setupEvents;
function setupEvents(evnt) {
   document.someForm.text2.onblur=checkRequired;
}
function checkRequired (evnt) {
  evnt = evnt ? evnt : window.event;
  var target = evnt.target ? evnt.target : evnt.srcElement;
  var txtInput = target.value;
  if (txtInput == null || txtInput == "") {
     document.write("value is required in field");
  }
}
</script>
</head>
<body>
<form name="someForm">
    <input type="text" name="text1" /><br />
    <input type="password" name="text2" /><br />
    <input type="hidden" name="text3" value="hidden value" />
    <textarea name="text4" cols=50 rows=10>The text area</textarea>
    <input type="submit" value="Submit" />
</form>
</body>
</html>


Get key char

<html>
<head>
<title>Key Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
    var oTextbox = document.getElementById("txt1");
    oTextbox.value += "\n>" + oEvent.type;
    oTextbox.value += "\n    target is " + (oEvent.target || oEvent.srcElement).id;
    oTextbox.value += "\n    charCode is " + oEvent.charCode;
}
</script>
</head>
<body>
    <P>Type some characters into the first textbox.</p>
    <P><textarea id="txtInput" rows="15" cols="50"
        onkeypress="handleEvent(event)"></textarea></p>
    <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Get key code

<html>
<head>
<title>Key Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
    var oTextbox = document.getElementById("txt1");
    oTextbox.value += "\n>" + oEvent.type;
    oTextbox.value += "\n    target is " + (oEvent.target || oEvent.srcElement).id;
    oTextbox.value += "\n    keyCode is " + oEvent.keyCode;
}
</script>
</head>
<body>
    <P>Type some characters into the first textbox.</p>
    <P><textarea id="txtInput" rows="15" cols="50"
        onkeypress="handleEvent(event)"></textarea></p>
    <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Is Alt pressed during the event

<html>
<head>
<title>Key Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
    var oTextbox = document.getElementById("txt1");
    oTextbox.value += "\n>" + oEvent.type;
    oTextbox.value += "\n    target is " + (oEvent.target || oEvent.srcElement).id;
    oTextbox.value += "\n    charCode is " + oEvent.charCode;
    var arrKeys = [];
    if (oEvent.altKey) {
        arrKeys.push("Alt");
    }
    oTextbox.value += "\n    keys down are " + arrKeys;
}
</script>
</head>
<body>
    <P>Type some characters into the first textbox.</p>
    <P><textarea id="txtInput" rows="15" cols="50"
        onkeypress="handleEvent(event)"></textarea></p>
    <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Is Control pressed during the event

<html>
<head>
<title>Key Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
    var oTextbox = document.getElementById("txt1");
    oTextbox.value += "\n>" + oEvent.type;
    oTextbox.value += "\n    target is " + (oEvent.target || oEvent.srcElement).id;
    oTextbox.value += "\n    charCode is " + oEvent.charCode;
    var arrKeys = [];
    if (oEvent.ctrlKey) {
        arrKeys.push("Ctrl");
    }
    oTextbox.value += "\n    keys down are " + arrKeys;
}
</script>
</head>
<body>
    <P>Type some characters into the first textbox.</p>
    <P><textarea id="txtInput" rows="15" cols="50"
        onkeypress="handleEvent(event)"></textarea></p>
    <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Is the Shift pressed during the event

<html>
<head>
<title>Key Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
    var oTextbox = document.getElementById("txt1");
    oTextbox.value += "\n>" + oEvent.type;
    oTextbox.value += "\n    target is " + (oEvent.target || oEvent.srcElement).id;
    oTextbox.value += "\n    charCode is " + oEvent.charCode;
    var arrKeys = [];
    if (oEvent.shiftKey) {
        arrKeys.push("Shift");
    }
    oTextbox.value += "\n    keys down are " + arrKeys;
}
</script>
</head>
<body>
    <P>Type some characters into the first textbox.</p>
    <P><textarea id="txtInput" rows="15" cols="50"
        onkeypress="handleEvent(event)"></textarea></p>
    <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Keystroke detector

<HTML>
<HEAD>
<TITLE>Keystroke detector</TITLE>
</HEAD>
<BODY>
<SCRIPT>  
   
function checkKey(e){
   if (e.keyCode == 84){
      if (navigator.appName == "Microsoft Internet Explorer")
         e.returnValue = false; //works with Explorer
      else {
         //deal with Navigator or Mozilla
         str = document.theForm.theText.value;
         if (str.length == 1) 
            newstr=" ";
         else {
            newstr = str.substring(0, str.length -1);
         }
         document.theForm.theText.value = newstr;          
      }
   }
   else {     
      alert ("You entered the character " + String.fromCharCode(e.keyCode) + ".");
   }
}
</SCRIPT>
<FORM name="theForm">
<INPUT type=text name="theText" onKeyDown="checkKey(event);">
</FORM>
</BODY>
</HTML>


onkeydown key event handler

<html>
    <head>
        <title>Key Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Type some characters into the first textbox.</p>
        <P><textarea id="txtInput" rows="15" cols="50"
            onkeydown="handleEvent(event)"
            onkeyup="handleEvent(event)"
            onkeypress="handleEvent(event)"></textarea></p>
        <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>


onkeypress key event handler

<html>
    <head>
        <title>Key Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Type some characters into the first textbox.</p>
        <P><textarea id="txtInput" rows="15" cols="50"
            onkeydown="handleEvent(event)"
            onkeyup="handleEvent(event)"
            onkeypress="handleEvent(event)"></textarea></p>
        <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>


onkeyup key event handler

<html>
    <head>
        <title>Key Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Type some characters into the first textbox.</p>
        <P><textarea id="txtInput" rows="15" cols="50"
            onkeydown="handleEvent(event)"
            onkeyup="handleEvent(event)"
            onkeypress="handleEvent(event)"></textarea></p>
        <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>


Use String.fromCharCode to convert key event code to key event char (IE)

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function press()
{
    var char;
    char = String.fromCharCode(event.keyCode);
    window.status = "You pressed " + char;
}
//  -->
</script>
</head>
<body onkeydown="press()">
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Key_Event&oldid=8779»