JavaScript Tutorial/Event/Key Event

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

Display key event code in status bar (IE)

   <source lang="javascript">

<html> <head> <title>A Simple Page</title> <script language="JavaScript">

</script> </head> <body onkeydown="press()"> </body> </html></source>


Focus lost event

   <source lang="javascript">

<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" />

   <input type="password" name="text2" />

   <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></source>


Get key char

   <source lang="javascript">

<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>

Type some characters into the first textbox.

<textarea id="txtInput" rows="15" cols="50" onkeypress="handleEvent(event)"></textarea>

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Get key code

   <source lang="javascript">

<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>

Type some characters into the first textbox.

<textarea id="txtInput" rows="15" cols="50" onkeypress="handleEvent(event)"></textarea>

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Is Alt pressed during the event

   <source lang="javascript">

<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>

Type some characters into the first textbox.

<textarea id="txtInput" rows="15" cols="50" onkeypress="handleEvent(event)"></textarea>

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Is Control pressed during the event

   <source lang="javascript">

<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>

Type some characters into the first textbox.

<textarea id="txtInput" rows="15" cols="50" onkeypress="handleEvent(event)"></textarea>

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Is the Shift pressed during the event

   <source lang="javascript">

<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>

Type some characters into the first textbox.

<textarea id="txtInput" rows="15" cols="50" onkeypress="handleEvent(event)"></textarea>

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Keystroke detector

   <source lang="javascript">

<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></source>


onkeydown key event handler

   <source lang="javascript">

<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>

Type some characters into the first textbox.

<textarea id="txtInput" rows="15" cols="50" onkeydown="handleEvent(event)" onkeyup="handleEvent(event)" onkeypress="handleEvent(event)"></textarea>

<textarea id="txt1" rows="15" cols="50"></textarea>

   </body>

</html></source>


onkeypress key event handler

   <source lang="javascript">

<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>

Type some characters into the first textbox.

<textarea id="txtInput" rows="15" cols="50" onkeydown="handleEvent(event)" onkeyup="handleEvent(event)" onkeypress="handleEvent(event)"></textarea>

<textarea id="txt1" rows="15" cols="50"></textarea>

   </body>

</html></source>


onkeyup key event handler

   <source lang="javascript">

<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>

Type some characters into the first textbox.

<textarea id="txtInput" rows="15" cols="50" onkeydown="handleEvent(event)" onkeyup="handleEvent(event)" onkeypress="handleEvent(event)"></textarea>

<textarea id="txt1" rows="15" cols="50"></textarea>

   </body>

</html></source>


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

   <source lang="javascript">

<html> <head> <title>A Simple Page</title> <script language="JavaScript">

</script> </head> <body onkeydown="press()"> </body> </html></source>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Key_Event&oldid=8779»