Jump to content

Divs And Onkeydown


shadowayex
 Share

Recommended Posts

I'm experimenting with keyboard and mouse events in JavaScript and I tried an onkeydown function in a div and alas, nothing happened. A snippet of the code looks like this:

<div onclick="alert('hi');" onkeydown="alert('hi');"></div>

The onclick works just fine, but the onkeydown does not. I read that divs support onkeydown and was wondering if there's something else I need to do to the div to make the onkeydown activate.

Link to comment
Share on other sites

Well, I edited the code some, and here's what I got:This function:

			function changeFocus()			{				document.getElementById('field').focus();			}

And this div:

<div id="field" onfocus="alert('I am focused');" onclick="alert('I have been clicked');" onkeydown="alert('A key has been pressed');"></div>

The onclick works. The onfocus does not launch, and the onkeydown still does not work.Discovery: They all work in IE8, but not Firefox 3.0.10. Come on Firefox, why fail me now?

Link to comment
Share on other sites

This problem still hasn't been fixed.Firefox seems to not let the div have the focus. I have the code set up like so:

function changeFocus(){			document.getElementById('field').focus();}

<body onload="changeFocus():">			<div id="field" onfocus="alert('I am focused');" onclick="alert('I have been clicked');" onkeydown="alert('A key has been pressed');"></div></body>

How do I get the div focused in Firefox?

Link to comment
Share on other sites

The code works fine with me if i just first click the div and then press a button. Maybe you should add a width height and background property so it's more clear where the div actually is?EDIT: I tested it in Opera.

Edited by Vytas
Link to comment
Share on other sites

I'm guessing, but I suspect FF's reasoning goes like this: since registering a keydown would imply that text is actually being entered, and since a normal div doesn't behave that way, div elements will not register keydown events.This especially makes sense since FF already allows the HTML 5 contenteditable property, which DOES allow keydown events to enter text.See for yourself. Add contenteditable="true" to your div tag, and you'll get action on those event handlers you've set up.But now you have a blinking cursor, a dotted outline, and text input to deal with. The last two can be dealt with, but that cursor's gonna blink. So I'm not really offering this as a solution.Unless the ability to edit text is what you're after to begin with?

Link to comment
Share on other sites

Vytas: I do have a width and a height :). I didn't post that code because it was unrelated.Deirdre's Dad: Your suggestion seems to work. The blinking cursor is quite annoying as what this is supposed to do is essentially allow me to move a small square around in the div with the arrow keys. If you are curious as to why, moreso because I felt it'd 1) help me learn to use keyboard events and 2) it'd entertain me for hours :).If this is the only solution, I can deal with it. It's not like this is for anything special besides to add to my porfolio of random JavaScript things I've built. It's quite the portfolio, although 90% of it is seemingly pointless apps (much like this one) that are used primarily to learn.Thanks for the help and I'll post back here if I happen upon a different way, just so if someone else has this problem and absolutely can't have that cursor, they may have hope.

Link to comment
Share on other sites

Why does all this talk about onkeydown event makes me glad im using Opera? lol?Why isn't there just one web browser which is being updated by all the major web-browser developpers. (KEEP DREAMING). Then we wouldn't have compatibility errors.

Link to comment
Share on other sites

Oh! The window object should be able to capture your events. Then just filter out everything that's not an arrow (which I guess you're already doing).

window.onkeydown = function (e) {	//whatever}

Link to comment
Share on other sites

Vytas: I would more prefer that what I write works exactly the same browser to browser :). I don't care about how many browsers there are.Anyways, to anyone who's wondering, I found setting the tabindex allows the div to be focused as well. It still gives the annoying dotted lines but setting the outline to none in CSS get's rid of that.The working version of the entire code looks as followed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<title>Javascript Movement</title>		<script type="text/javascript">			function changeFocus()			{				var field = document.getElementById('field').focus();			}		</script>		<style type="text/css">			div#field			{				border: 2px solid #000000;				height: 500px;				outline: none;				width: 500px;			}		</style>	</head>	<body onload="changeFocus();">		<div id="field" tabindex="" onkeydown="alert('A key has been pressed');"></div>	</body></html>

I found that the tabindex does not even have to have a value. As long at it exists, the element can take focus. Although it may be smart to give it some kind of value if you're going to be using tabindex for other elements. I'm not sure if there's some value I should have, but I tried a bunch of different ones, then an empty value. They all allow the div to be focused.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...