KeyCodes & Events
Oct 9, 2005
This simple program displays the Keycode & event type for a key pressed. Good for a quick reference.
<html>
<head>
<title>Keyboard Events and Codes</title>
<style type="text/css">
body {font-family:Arial, sans-serif}
h1 {text-align:right}
td {text-align:center}
</style>
<script language="JavaScript" type="text/javascript">
// array of table cell ids
var tCells = ["downKey", "pressKey", "upKey", "downChar", "pressChar",
"upChar", "keyTarget", "character"];
// clear table cells for each key down event
function clearCells() {
for (var i = 0; i < tCells.length; i++) {
document.getElementById(tCells[i]).innerHTML = "—";
}
}
// display target node's node name
function showTarget(evt) {
var node = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if (node) {
document.getElementById("keyTarget").innerHTML = node.nodeName;
}
}
// decipher key down codes
function showDown(evt) {
clearCells();
evt = (evt) ? evt : ((event) ? event : null);
if (evt) {
document.getElementById("downKey").innerHTML = evt.keyCode;
if (evt.charCode) {
document.getElementById("downChar").innerHTML = evt.charCode;
}
showTarget(evt);
}
}
// decipher key press codes
function showPress(evt) {
evt = (evt) ? evt : ((event) ? event : null);
if (evt) {
document.getElementById("pressKey").innerHTML = evt.keyCode;
if (evt.charCode) {
document.getElementById("pressChar").innerHTML = evt.charCode;
}
showTarget(evt);
var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
// use String method to convert back to character
document.getElementById("character").innerHTML =
String.fromCharCode(charCode);
}
}
// decipher key up codes
function showUp(evt) {
evt = (evt) ? evt : ((event) ? event : null);
if (evt) {
document.getElementById("upKey").innerHTML = evt.keyCode;
if (evt.charCode) {
document.getElementById("upChar").innerHTML = evt.charCode;
}
showTarget(evt);
}
}
// set page-wide event listeners
document.onkeydown = showDown;
document.onkeypress = showPress;
document.onkeyup = showUp;
</script>
</head>
<body>
<h1>Key and Character Codes vs. Event Types</h1>
<hr>
<p>Enter some text with uppercase and lowercase letters:<br>
<form>
<input type="text" id="entry" size="60"
onkeydown="showDown(event)"
onkeypress="showPress(event)"
onkeyup="showUp(event)">
</textarea></p>
</form>
<table border="2" cellpadding="5" cellspacing="5">
<caption>Keyboard Event Properties</caption>
<tr><th>Data</th><th>keydown</th><th>keypress</th><th>keyup</th></tr>
<tr><td>keyCode</td>
<td id="downKey">—</td>
<td id="pressKey">—</td>
<td id="upKey">—</td>
</tr>
<tr><td>charCode</td>
<td id="downChar">—</td>
<td id="pressChar">—</td>
<td id="upChar">—</td>
</tr>
<tr><td>Target</td>
<td id="keyTarget" colspan="3">—</td>
</tr>
<tr><td>Character</td>
<td id="character" colspan="3">—</td>
</tr>
</table>
</body>
</html>
View 2 Replies
ADVERTISEMENT
Mar 15, 2004
A little page for finding keycodes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test bed</title>
<script language="JavaScript">
function checkKeycode(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
alert("keycode: [" + keycode + "]");
}
</script>
</head>
<body>
<p>Type in here:
<input type="text" size="10" value="" onKeyPress="checkKeycode(event)">
</p>
</body>
</html>
View 6 Replies
View Related
Jan 11, 2012
The event which in the following keydown function code is not returning the correct key codes. I have checked this in Chrome using the developer tools and the console.log(e.which) statement in my code.
var KEY = {
UP: 38,
DOWN: 40,
W: 87,
[Code]....
View 3 Replies
View Related
Jul 21, 2010
I am trying to "ajaxify" my site. Now I have one problem:
$("#posts").children().remove();
$("#tag-sidebar").children().remove();
$.each(data.Tags_Sidebar, function (indexInArray, valueOfElement) {
var insert = $("<li>");
[Code]......
Now when I click one of those links (href1, href2, href3) generated, the click event won't execute! What's the problem? Also, is it right that I have to transfer the valueOfElement over, like I did? What does stopEventPropagation do? Prevent the href from being navigated to? That's what I am trying to do.
The data object is JSON fed from here:[URL]
The HTML is here: [URL]
View 2 Replies
View Related
Feb 4, 2011
I have a series of images with an animation bound to mouseover and mouseleave events, and I'm trying to get my head around adding a click event that would prevent the mouseleave animation from occurring only for the image that was clicked, preserving everything else as is (until another image is clicked). I've discovered .stop() and I think I'm getting close, but some part of the logic is still escaping me.
View 3 Replies
View Related
Sep 24, 2009
I've got 2 pages: a current events page and a past events page the current events page loads fine as there is only about 10 events the past events page takes about 30 seconds to load and will crash if u click your mouse in the loading time.
The pages are near identical the only difference is the query that selects the events (> versus <)
The page loads immediately without:
But when i put it back in the above happens. I'm using jQuery.roundedcorners.
View 1 Replies
View Related
Jan 11, 2011
It's pretty common to assign a click even to a <div> (or other tag), such as:
Code:
// JQuery
$(document).ready(function(){
$("div").click(function(){[code]....
Of course this event won't be accessible from the keyboard, which might be nice. Now if it where an <a> tag, you can do this:
Code:
$(document).ready(function(){
$("a").click(function(e){
alert("clicked");
e.preventDefault();
});
});
The click event will fire if you click the <a>, OR if you tab to it with your keyboard and hit Enter.My question is: is there a way to make elements other than <a> tags accessible in this way? I recently discovered if you define a tabindex on your div, such as <div tabindex="0">test</div>, you can tab to that div, but click events don't seem to fire if you use your keyboard. Are <a> tags the only tags that can work in this way?
View 3 Replies
View Related
Jan 12, 2006
This works wonderfully in Firefox, but when it runs for the first time in IE it only creates the field, but won't create any attributes for the events. When debugging the events are null. How can I get this to work in IE. Code:
View 1 Replies
View Related
Dec 23, 2005
I am currently creating a small user object that will control some events which will be passed and store some data such as point values. Currently I am having some difficulties with the event method handleMouseDown with any property defined in the object. Code:
View 2 Replies
View Related
Sep 8, 2007
I have a general question regarding events. I have a container div, and many divs within it. Without attaching an event to each of the divs, can i attach an event to the container div, and somehow attain which div within it was the event fired over.
I am following the standards, and also do not to need to be concerned about IE, and its issues.
View 2 Replies
View Related
Jul 23, 2005
I'm having some difficulties with a menu I'm making. I build up the
menu through DOM. I append childnodes to a tree. 2 types of children
are possible: url (a hyperlink) and sub (a submap).
The tree is thus of a structure
main
|-url1
|-url2
|-submap
|--url21
|--url22
To open up the submaps I set the onclick event to a function I
created:
itemnode.onclick=function() { openMap(itemnode) }
The problem now is that 1 click in a submap results in several times
the openmap function. A click on the url21 node is in fact a click on
a child of submap so the function in the onclick event of this submap
is called. But it is also a click on a child of main, so this onclick
function is also called.
How can you limit that the onclick event handler is only called on the
1 node (ic. submap) where you actually clicked on submap instead of
its urls?
Full code listing below....
View 2 Replies
View Related
Jul 23, 2005
I have an object
<button id=summer>
Now I want to dynamically set an event for this object:
function foo()
{
}
myobject = document.getElementById("summer");
myobject.onClick = foo;
Problem is that I want to give the function an argument. "foo(this)" instead
of just "foo".
How can I achieve that?
View 2 Replies
View Related
Jul 23, 2005
I want to make my site more dynamic... but i dont find out how this works...
On my site there is at the left side the navigation bar and at the rigt side
i want to put a photo. The photo should change when someone puts the cursor
over the links in the left side.
Does anybody kno how this works?
View 5 Replies
View Related
Apr 9, 2006
I have code that looks like this:
function setupEventWrapper(obj) {
old_ev_handler = obj.onsubmit;
obj.onsubmit = function () {
do_something();
if (old_ev_handler != undefined) {
old_ev_handler();
}
if (event_cancelled()) {
undo_something();
}}}
it wraps the onsubmit handler (if any) within a new function which
do_something() and then calls the old event handler.
My problem is how can I detect if the event has been canceled by
old_ev_handler(). AFAIK an event can be cancelled in three ways:
* returning false, easy to check for
* setting event.returnValue = false on IE, easy to check for
* calling event.preventDefault() on DOM
How can I check if event.preventDefault() has been called?
View 1 Replies
View Related
Jun 6, 2006
I know some JavaScript mouse events are:
onClick, onMouseOver, onMouseOut, onMouseDown and onMouseUp.
Are there more like:
onMousePress, onMouseDrag, onMouseMove
In Java there are:
mouseClicked, mouseEntered, mouseExited, mousePressed, mouseReleased,
mouseDragged, mouseMoved and mouseWheelMoved.
Also in Java can detected which mouse button (left, middle or right)
has pressed, released or dragged.
View 1 Replies
View Related
Jul 20, 2005
is it possible to find out if function F5 (reload) button was pressed ?
View 2 Replies
View Related
May 2, 2009
I'm doing a tutorial from a book to drag and drop elements on a page into a shopping cart. I had everything working fine in IE until I added the function for key presses. What it should do is when 1 is clicked, the first item is moved into the cart, and if I press 1 again the item goes back to where it started.
The function that's giving me problems is keyDrag (at the bottom). I included the other functions in case you need to see them because keyDrag calls them. The error I'm getting in IE is "object expected" and it's at the line marked below in the keyDrag function.
What happens when I press 1 is the item that's supposed to go to the cart appears at the cursor as if I clicked and dragged it. But if I drag it manually into the cart, and then press 1, it will snap back to its original place without problems.
Code:
<script type="text/javascript" language="javascript">
if(isNS) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
[Code]...
View 2 Replies
View Related
Feb 26, 2003
I'm just not getting how to script for events. I know it's a heavy task, but would somebody be willing to break it all down for me? I'd really like to learn these. Code:
View 2 Replies
View Related
Jan 5, 2006
I am currently working on a website that administers timed online tests, and we are trying to implement some measures to reduce the ability to 'cheat' while the test is running. These include disabling right clicks, and handling keystroke events. Additionally, we would like to end the test if the maximized browser popup window where the test is loaded happens to lose focus during the testing session.
I have implemented some code to call an event handler that will end the test if a window.onblur event is triggered during the session. It is working fine in Firefox, but IE seems to interpret window.onblur events differently. Basically, in Firefox I can click anywhere within the window without a window.onblur event triggering, but in IE if I click outside of the test table or form element etc. into whitespace, for instance, it fires.
In addition to using window.onblur, I have also tried top.onblur, and also putting onblur in the body tag of my html:
<body bgcolor="#ffffff" onBlur="lostfocus()">
Again, both work in Firefox, but neither of these alternate methods seem to restrict IE in the appropriate manner.
So my question is this: is there any way to craft this such that IE will play nice and trigger the event ONLY when someone clicks outside of the browser window (on to the start menu, for instance)?
<script language="javascript">
<!--
window.onblur=lostfocus;
function lostfocus(e) {
// student has attempted to cheat, end test
}
// -->
</script>
View 10 Replies
View Related
Mar 21, 2001
How would I write 2 onload events into the body tag?
I currently use:
onLoad="if (self != top) top.location=self.location" and have found a scroller that may work better than my current one but it has an onload command as well.
I can't seem to figure out how to do both.
What about if I have 3?
View 7 Replies
View Related
Dec 5, 2005
i have a problem with two occuring events in a form. On a input/text field I have registered an onChange Handler and I have defined a submit Button.
Now the users changes the value of the texfield and hits the enter-Key. Now it seems that both events occures, the onChange and the onSubmit of the form. Can I defined the order of the events or better cancel one event, when the other occurs (e.g. cancel the onChange when the user hits the enter-key)?
View 1 Replies
View Related
Sep 2, 2001
Basically I have a rollover effect that I would like to cause a hidden layer to become visible (currently I have this as a click event)?
View 5 Replies
View Related
Mar 22, 2002
Can I have two events in the same form? I'm trying to validate some fields (one event) and get the value of this list box (another one). I tried to put both in the form1_check, but it didn't work (because are different events? Maybe.). My code:
View 1 Replies
View Related
Mar 29, 2002
I would like to make the onMouseOver event for an IMG swap 2 images. I currently have a javascript function for this (I didnt write it) which just inputs which image you want to swap and what with. I want to swap 2 images and not just one.
<IMG SRC="themes/$thename/images/bottomnav_02.gif" WIDTH="82" HEIGHT="23" name="home" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('topics','','themes/$thename/images/bottomnav_02on.gif',1)">
There is the code for the IMG tag, now the part where it does the onMouseOver it changes out the image of my choice. It calls the MM_swapImage. I want to call that function twice with diffrent parameters. I tried adding another onMouseOver line after the first one, but didnt work. Is there a way to do this in HTML? Hope that made sense.
View 7 Replies
View Related
Jul 23, 2005
If a div is positioned block or relative, events fire over the entire area
of the div. If the div is positioned absolute they don't--they only fire
over the div's text or image child elements, if any. This isn't true in FF
or Opera, nor was it true in IE 5. If there is any logic in this behavior.
View 4 Replies
View Related
Aug 11, 2005
I am trying to do the following,
1. Get a piece of HTML from a db
2. Display it on my page
with a requirement - clicking on any links in that HTML should not take
me away from the page.
This does not only include links which are formed by <a>nchor tags, but
also other ways of doing it, like,
<span onClick='location.href="http://someurl"'> Blah blah..
</span>
In other words, all the events that can be raised by this piece of html
should be blocked.
Setting all the 'onClick's and 'href's to "#" or blank string is
probably a good idea to start with, but the list of all such possible
causes for an event to be raised, may not be very straightforward to
compile.
I was wondering if there could be any way to nullify/block the events
that can be raised by such a piece of HTML.
View 5 Replies
View Related
