PDA

View Full Version : capturing the "Enter" event

brendon99
12-11-2003, 04:21 AM
Back again....different problem

I have a table, on which each row is a checkbox. I want the user to be able to press <Enter> and trigger one event, whilst still being able to click on the checkbox as well (without triggering the event).

The problem I have is that I want to keep the focus on the checkbox all the time, so that the user can tick it using the "spacebar". Obviously I can't put an onclick event on the checkbox, since every time you tick the box, the event will be triggered.


Can you seperately code two keyboard events for a single element?
whammy
12-11-2003, 04:40 AM
Well you may be able to (or not!), but by disabling the "enter" (13) event, you're basically ticking off a lot of users. If I were you, I'd definitely consider using a different key for whatever it is you're trying to accomplish.

By default, the "enter" key is used to submit the form, you use the tab key (or shift+tab to go backwards) to work your way through the form. And anyone I know who types fast or uses the internet a lot (or who has to make/test a lot of forms!) prefers to use the keyboard for the majority of their form navigation.

What exactly are you trying to do (can you provide a better explanation of your end goal), and can we see a mock up of the form?

You say you want to keep focus all the time on the checkbox, and then want an onclick event on it. I really don't see any problems with anything you've posted offhand. Without knowing what you're trying to do there, it's hard to help. :(

P.S. When you have an onclick event in a checkbox, you can call a function, pass the current state of the checkbox to the function (i.e. this.checked) as a boolean value, and then process the function from that point.

To make a long story short, about 99% of the time when I see a post that asks how to disable the "enter" key, the poster is doing something wrong regarding client-side forms and trying to make them work in a way that doesn't make sense. I've even seen brilliant programmers do it. :p
brendon99
12-12-2003, 12:44 AM
Sorry, visual is always better. Attached is a trimmed version of what I've got.

<html>


<style type="text/css">

thead {
background: #C0C0C0;
}
tr.normal {
background: #FFFFFF;
}
tr.high {
background: red;
color:white;
}
tr.low {
background: white;
color:red;

}


</style>

<script type="text/javascript" >
var fv_save_row_id, fv_save_class
function highlightme(fv_row)
{

var table = document.getElementById("mytable")

if (fv_save_row_id > 0)
{var row = table.rows.item(fv_save_row_id)
row.className = fv_save_class
}

row = table.rows.item(fv_row)

fv_save_row_id = fv_row
fv_save_class = row.className

row.className = "high"

}

function load_details(fv_number)
{
alert("Drilling into customer details")
}
</script>

<body bgcolor="#d0d0d0"/>

<form>


<table id="mytable" style="float:left;width: 100%;margin-left:-0.5%;margin-top:-1.5%" bgcolor="white">
<thead >
<tr >
<th>Checkbox </th>
<th>Customer Name</th>
</tr>
</thead >
<tr>
<td> <input type="checkbox" id="ticker" name="bjd" onfocus="highlightme(1)" /> </td>
<td >
<span onclick="load_details(1)" style="color:blue;width:200;cursor:pointer">
<u>Customer A</u>
</span>
</td>
</tr>
<tr>
<td> <input type="checkbox" id="ticker" name="bjd" onfocus="highlightme(2)" /> </td>
<td >
<span onclick="load_details(2)" style="color:blue;width:200;cursor:pointer">
<u>Customer B</u>
</span>
</td>
</tr>
<tr>
<td> <input type="checkbox" id="ticker" name="bjd" onfocus="highlightme(3)" /> </td>
<td >
<span onclick="load_details(3)" style="color:blue;width:200;cursor:pointer">
<u>Customer C</u>
</span>
</td>
</tr>
<tr>
<td> <input type="checkbox" id="ticker" name="bjd" onfocus="highlightme(4)" /> </td>
<td >
<span onclick="load_details(4)" style="color:blue;width:200;cursor:pointer">
<u>Customer D</u>
</span>
</td>
</tr>
</table>


<body />

</form>

</html>




I'm trying to mimic the behaviour of a grid. If you tab through the table, each row is highlighted (by focusing on the checkbox). If you press the spacebar, it ticks the checkbox. Unfortunately you have to use the mouse to click on the customer name.

My users are used to highlighting the row, then pressing <enter> to drill down further - that is what I'm trying to accomplish.

Is this a better explanation?:confused:
brendon99
12-18-2003, 01:18 AM
I gather no-one has any ideas....?
adios
12-18-2003, 08:32 AM
You gathered wrong, kemo-sabe. :p

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

#mytable {
width:600px;
margin:100px auto;
background:#66c;
border-collapse: collapse;
border: 2px black solid;
}
th {
background: #000066;
color:#fff;
border: 3px #eef ridge;
}
tr.normal {
background: #66c;
}
tr.high {
background: #66f;
color:white;
}
tr.low {
background: white;
color:red;
}
td {
font-size: smaller;
text-align: center;
padding: 3px;
border: 1px white dashed;
}
.fakelink {
color:#eef;
font-weight:bold;
text-decoration: underline;
cursor: pointer;
}

</style>
<script type="text/javascript">

function highlightme(oCheckbox)
{
var row, _row, i = 0, node = oCheckbox;
do node = node.parentNode;
while (node.nodeName != 'TR');
row = node;
do node = node.parentNode;
while (node.nodeName != 'TBODY');
trs = node.getElementsByTagName('TR');
while (_row = trs.item(i++))
_row.className = (_row == row) ? 'high' : 'normal';
}

function checkkey(e, oCheckbox)
{
e = (e) ? e : (window.event) ? window.event : null;
if (e != null && e.keyCode == 13)
{
var node = oCheckbox.parentNode;
while (node.nodeName != 'TD')
node = node.parentNode;
node = node.nextSibling;
while (node.nodeName != 'TD')
node = node.nextSibling;
while (node.hasChildNodes() && node.nodeName != 'SPAN')
node = node.lastChild;
node.style.color = '#f9f';
node.onclick();
}
}

function load_details(which)
{
alert('...now drilling ' + which + ' !');
return false;
}

</script>
</head>
<body bgcolor="#d0d0d0">
<form onsubmit="return false;">
<table id="mytable">
<thead>
<tr>
<th>Checkbox</th><th>Customer Name</th>
</tr>
</thead>
<tbody>
<tr>
<td id="test"><input type="checkbox" name="bjd" onfocus="highlightme(this)" onkeypress="checkkey(event,this)" /></td>
<td id="test2"><span class="fakelink" onclick="load_details('Customer A')">Customer A</span></td>
</tr><tr>
<td><input type="checkbox" name="bjd" onfocus="highlightme(this)" onkeypress="checkkey(event,this)" /></td>
<td><span class="fakelink" onclick="load_details('Customer B')">Customer B</span></td>
</tr><tr>
<td><input type="checkbox" name="bjd" onfocus="highlightme(this)" onkeypress="checkkey(event,this)" /></td>
<td><span class="fakelink" onclick="load_details('Customer C')">Customer C</span></td>
</tr><tr>
<td><input type="checkbox" name="bjd" onfocus="highlightme(this)" onkeypress="checkkey(event,this)" /></td>
<td><span class="fakelink" onclick="load_details('Customer D')">Customer D</span></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Barely time to test so, could break. Nice & blue, though.
brendon99
12-19-2003, 05:05 AM
Good call, Tonto! :D

It worked OK, but can I ask the interpretation of this line?

e = (e) ? e : (window.event) ? window.event : null;


cheers, and thanks again
adios
12-19-2003, 05:31 PM
<input type="checkbox"......onkeypress="checkkey(event,this)" />

This passes the Event object to checkkey(). In Internet Explorer, it's that same-old-crummy-event-object as ever, the (global) window.event created every time an event fires in the browser. In NS/moz, it's a passed object (not global) that sort of magically appears within handler functions. If you bind the handler with JS, it shows up as the function's first argument:

element_ref.onclick = foo;

function foo(e) {
if (e.keyCode &&.....

Used the parameter variable e but many use 'evt' or something else. If you assign the handler within your HTML - as illustrated at the top of this post - you need to pass the Event object explicitly; easy enough, as it shows up as the (local) variable event and can be inserted into the handler (picking up the IE window.event at the same time). Inside the handler this conditional:

e = (e) ? e : (window.event) ? window.event : null;

...is the equivalent of:

if (something was passed into e - the Event object)
then e equals e;
else e equals window.event (i.e., IE :D )
else e equals nada

This handles both situations: when binding handlers via HTML (and passing the object in both cases), and when binding via JS, in which case only moz passes anything, so IE gets it's reference to the event object inside the handler function. Hi-ho Silver and Away.