...

View Full Version : Two HTML Elements Use the Same Key Stroke to Invoke Two Different Functions



jiapei_jen
07-12-2007, 03:43 PM
I have two HTML elements in a web page; namely, an input text field and a data table.

The keyboard "Enter" key is used in both the input text field and the data table. The "Enter" key for the input text field is to invoke executeSearch( filterEvent ) and the "Enter" key for the data table is to invoke processKeys ( event ).


<input type="text" id="filter" style="width:25em;" onkeypress="executeSearch( filterEvent )"/>
<table id="countryTable" onkeydown="processKeys( event )"> .....</table>

The processKeys( event ) invoked by the "Enter" key works well.

But, when I use the "Enter" key in the input text field, the processKeys( event ) instead of the executeSearch ( filterEvent ) is invoked. Why is the executeSearch( filterEvent ) not recognized?


...
<script language="JavaScript1.1">
document.onkeydown = function( event ){ processKeys(event); };
document.onkeypress = function( event ) { executeSearch( filterEvent ); };

function executeSearch( fe )
{
if ( !fe ) var fe = window.event;
if ( fe.keyCode ) code = fe.keyCode;

switch (code)
{
// Enter Key
case 13:
ValidateBlankField();
break;
}
}

function processKeys( e )
{
var keyID = (window.event) ? event.keyCode : e.keyCode;

switch (keyID)
{
// Enter Key
case 13:
chooseCountry();
break;

.....

}
.....
}

</script>
...
...

vwphillips
07-12-2007, 04:15 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript1.1">
document.onkeydown = function( event ){ processKeys(event); };
document.onkeypress = function( event ) { executeSearch( ); };

function executeSearch( e ){
document.Show.Show0.value=zxcEventObj(e).tagName;
}

function processKeys( e ){
document.Show.Show1.value=zxcEventObj(e).tagName;
}
function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}

</script> </head>

<body>

</body>

</html>

jiapei_jen
07-12-2007, 04:56 PM
Thank you for your reply. But, my knowledge in JavaScript is not well enough to fix my own code even by trying to understand your code.

I still face the same problem. The JavaScript function in the input text field is not recognized:


<script language="JavaScript1.1">
document.onkeydown = function( event ){ processKeys(event); };
document.onkeypress = function( event ) { executeSearch( ); };

function executeSearch( e )
{
if ( !e ) var e = window.event;
if ( e.keyCode ) code = e.keyCode;

switch (code)
{
// Enter Key
case 13:
ValidateBlankField();
break;
}
}

function processKeys( e )
{
var keyID = (window.event) ? event.keyCode : e.keyCode;

switch (keyID)
{
// Enter Key
case 13:
chooseCountry();
break;

.....

}
.....
}

</script>
...
...

vwphillips
07-12-2007, 11:27 PM
The posted code identifies the event object in IE
For Moz you will need to add the event call to the search textbox


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript1.1">
document.onkeydown = function( event ){ processKeys(event); };
document.onkeypress = function( event ) { executeSearch( ); };

function executeSearch( e ){
if (zxcEventObj(e).tagName!='INPUT') return false
if (zxcEventObj(e).id!='Test') return false
alert('execute search code');
}

function processKeys( e ){
if (zxcEventObj(e).tagName!='HTML') return false
alert('execute the \'country\' code');
}
function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}

</script> </head>

<body>
Search Text Box<input size=10 id="Test" >

</body>

</html>

jiapei_jen
07-13-2007, 04:07 PM
I use IE6.

I used your Mozilla code, the executeSearch( e ) for the input text field was invoked. However, I was able to see the result of that function in the browser for about only "one second". Thereafter, the result disappeard and the original screen was displayed.

How do I "hold" the result on the screen?

vwphillips
07-13-2007, 04:41 PM
you have not posted enough of your code for me to comment

jiapei_jen
07-13-2007, 05:29 PM
Thanks for your attention to my question. Here is my code:


<script language="JavaScript1.1">
document.onkeydown = function( event ){ processKeys(event); };
document.onkeypress = function( event ){ executeSearch( event ); };

function executeSearch( e )
{
// because I use JSF, I have to use formID:fieldID
if ( zxcEventObj(e).id != 'countriesList:filter' ) return false

var keyID = (window.event) ? event.keyCode : e.keyCode;
switch (keyID)
{
case 13:
ValidateBlankField();
break;
}
}

function processKeys( e )
{
// The alert( zxcEventObj(e).tagName ); tells me it is BODY instead of HTML
if ( zxcEventObj(e).tagName != 'BODY' ) return false

var keyID = (window.event) ? event.keyCode : e.keyCode;

switch (keyID)
{
// Enter Key
case 13:
chooseCountry();
break;

.......
// lots of other keyboard keys and functions and they work

}

function zxcEventObj(zxce)
{
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}

</script>
.....
<f:view>
<body class="bodyDefault">
<h:form id="countriesList">
<div align="center">
<h:outputText value="Find " styleClass="textDefault"/>
<h:inputText id="filter" styleClass="withoutTextDefault" onkeypress="executeSearch( event )"/>
<p>
<div style="height:12em; width:20em;" id="container" class="scrollbar">
<h:dataTable value="#{countriesManagementBean.countriesList}" var="country"
id="countryTable" styleClass="lovTableDefault"
onkeydown="processKeys( event )"
ondblclick="addOnclickToDatatableRows();chooseCountry()">

.....
.....

</h:dataTable>
</div>
</div>

</body>
</f:view>
</html>

jiapei_jen
07-16-2007, 02:02 PM
Hi VW, please help me. The code does what it is supposed to do but the result stays on the screen for only one second. I am having difficult time to capture the result. My code is shown in the previouse posting.

vwphillips
07-16-2007, 02:40 PM
still not enough

Post a link to or a working example

jiapei_jen
07-16-2007, 03:04 PM
Okay, I am posting the entire code. This code is for a popup window.

The


document.onkeydown = function( event ){ processKeys(event); };
document.onkeypress = function( event ){ executeSearch( event ); };

can be found near the bottom.

I did not post the entire code earlier because my code does too many things in one page.

The "Enter" key is used at two places: in the input text field and in the table. But they perform different functions. In the input field, the "Enter" invokes a filter search. In the table, the "Enter" key closes the popoup window and pass the code of the selected row to the parent window. The "Enter" key in the table works as expected. I cannot capture the result of the "Enter" key in the input text field although it performs the function.



<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="theme/booking/Master.css" title="Style">
<style>
a { text-decoration: none; color: #000000; }
</style>
<script language="JavaScript1.1" type="text/javascript" src="common/filterTable.js"></script>
<script language="JavaScript1.1">

var firstRow = 1;
var currentRow;
var highlightedRow;
var clicked = 0;
var selected = 0;
var VISIBLE_ROWS = 10;

window.onload = function()
{
document.getElementById("countriesList:filter").value = window.opener.document.getElementById("vr:subjectCitizenOf").value;
filterTable_clickButton( 'countriesList:filter', 'countriesList:countryTable' );
}

function ValidateBlankField()
{
var filterCriterion = document.getElementById('countriesList:filter');

// Check the value of the element named filter
// from the form named genderTypes
if ( filterCriterion.value.replace(/^\s+/,"") == "" )
{
// If null display and alert box
alert( "Please provide filter criterion." );
// Place the cursor on the text field for revision
filterCriterion.focus();
// return false to stop further processing
return (false);
}
// If filter is not null continue processing
filterTable_clickButton( 'countriesList:filter', 'countriesList:countryTable' );
}

function addOnclickToDatatableRows()
{
var trs = document.getElementById( 'countriesList' ).getElementsByTagName( 'tr' );
for (var i = 0; i < trs.length; i++)
{
trs[i].onclick = new Function( "highlightRow( this )" );
}
}

function selectRow( row )
{
dehighlightRow( highlightedRow );
row.bgColor = ( row.bgColor != '#0000ff' ) ? '#0000ff' : '#ffffff';
highlightedRow = row;
clicked = 1;
}

function highlightRow( tr )
{

if ( currentRow == null )
{
tr.bgColor = ( tr.bgColor != '#0000ff' ) ? '#0000ff' : '#ffffff';
highlightedRow = tr;
}
else
{
dehighlightRow( highlightedRow );
tr.bgColor = ( tr.bgColor != '#0000ff' ) ? '#0000ff' : '#ffffff';
highlightedRow = tr;
// currentRow = tr.rowIndex;
}
}

function dehighlightRow( tr )
{
tr.bgColor = (tr.bgColor != '#ffffff') ? '#ffffff' : '#0000ff';
}

function chooseCountry()
{
if (opener && !opener.closed)
{ //check if opener is still open
if ( highlightedRow )
{
var selectedCountry = highlightedRow.getElementsByTagName('td')[0].innerHTML;
window.opener.document.getElementById("vr:subjectCitizenOf").value = selectedCountry;
window.opener.focus();
}
else
{
alert( "Please select a row." );
return;
}
}
clearInputText()
self.close();
}

function clearInputText()
{
var inputText = document.getElementById("countriesList:filter");
inputText.value == '';
}

function executeSearch( e )
{
if ( zxcEventObj(e).id != 'countriesList:filter' ) return false

var keyID = (window.event) ? event.keyCode : e.keyCode;
switch (keyID)
{
case 13:
ValidateBlankField();
return false;
break;
}
}

function processKeys( e )
{
if ( zxcEventObj(e).tagName != 'BODY' ) return false

var div = document.getElementById( 'container' );
var table = document.getElementById( 'countriesList:countryTable' );
var trs = document.getElementById('countriesList').getElementsByTagName('tr');
var numRows = table.rows.length;
var threshold = 7;
var rowsPerPage = 9;
var keyID = (window.event) ? event.keyCode : e.keyCode;

switch (keyID)
{
// Enter Key
case 13:
chooseCountry();
return false;
break;

// Page Up Key
case 33:
var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
{
// there is only one page.
currentRow = firstRow;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ currentRow - 1 ].offsetTop;
return false;
} else if ( parseInt( currentRow ) <= parseInt( rowsPerPage ) )
{
// reached the first page.
currentRow = firstRow;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ currentRow - 1 ].offsetTop;
return false;
} else
{
if ( parseInt( currentRow ) > parseInt( lastPageFirstRow ) )
{
currentRow = lastPageFirstRow;
} else if ( parseInt( currentRow )== parseInt( lastPageFirstRow ) )
{
currentRow -= threshold;
} else
{
currentRow -= threshold;
var nextPageFirstRow = currentRow - ( currentRow%threshold ) + 1;
currentRow = nextPageFirstRow;
}
scrollPage( currentRow );
return false;
}
break;

// Num Pad 9 (PgUp) Key
case 105:
var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
{
// there is only one page.
currentRow = firstRow;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ currentRow - 1 ].offsetTop;
return false;
} else if ( parseInt( currentRow ) <= parseInt( rowsPerPage ) )
{
// reached the first page.
currentRow = firstRow;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ currentRow - 1 ].offsetTop;
return false;
} else
{
if ( parseInt( currentRow ) > parseInt( lastPageFirstRow ) )
{
currentRow = lastPageFirstRow;
} else if ( parseInt( currentRow )== parseInt( lastPageFirstRow ) )
{
currentRow -= threshold;
} else
{
currentRow -= threshold;
var nextPageFirstRow = currentRow - ( currentRow%threshold ) + 1;
currentRow = nextPageFirstRow;
}
scrollPage( currentRow );
return false;
}
break;

// Page Down Key
case 34:
var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
{
// there is only one page.
var lastRow = numRows - 1;
currentRow = lastRow;
highlightRow( trs[ currentRow ] );
return false;
} else if ( parseInt( currentRow ) == parseInt( ( lastPageFirstRow - threshold ) ) )
{
// NOT WORKING.
currentRow += threshold;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ currentRow -1 ].offsetTop;
return false;
} else if ( parseInt( currentRow ) >= parseInt( lastPageFirstRow ) )
{
// reached last page.
var lastRow = numRows - 1;
currentRow = lastRow;
highlightRow( trs[ currentRow ] );
return false;
} else
{
if ( ( currentRow%threshold ) == 0 )
{
var nextPageFirstRow = currentRow + 1;
currentRow = nextPageFirstRow;
} else
{
currentRow += threshold;
var nextPageFirstRow = currentRow - ( currentRow%threshold ) + 1;
currentRow = nextPageFirstRow;
}
scrollPage( currentRow );
return false;
}
break;

// Num Pad 3 (PgDn) Key
case 99:
var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
{
// there is only one page.
var lastRow = numRows - 1;
currentRow = lastRow;
highlightRow( trs[ currentRow ] );
return false;
} else if ( parseInt( currentRow ) == parseInt( ( lastPageFirstRow - threshold ) ) )
{
// NOT WORKING.
currentRow += threshold;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ currentRow -1 ].offsetTop;
return false;
} else if ( parseInt( currentRow ) >= parseInt( lastPageFirstRow ) )
{
// reached last page.
var lastRow = numRows - 1;
currentRow = lastRow;
highlightRow( trs[ currentRow ] );
return false;
} else
{
if ( ( currentRow%threshold ) == 0 )
{
var nextPageFirstRow = currentRow + 1;
currentRow = nextPageFirstRow;
} else
{
currentRow += threshold;
var nextPageFirstRow = currentRow - ( currentRow%threshold ) + 1;
currentRow = nextPageFirstRow;
}
scrollPage( currentRow );
return false;
}
break;

// End Key
case 35:
var lastRow = numRows - 1;
currentRow = lastRow;
if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
{
// There is only one page
highlightRow( trs[ currentRow ] );
} else
{
var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ lastPageFirstRow ].offsetTop;
}
return false;
break;

// Num Pad 1 (End) Key
case 97:
var lastRow = numRows - 1;
currentRow = lastRow;
if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
{
// There is only one page
highlightRow( trs[ currentRow ] );
} else
{
var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ lastPageFirstRow ].offsetTop;
}
return false;
break;

// Home Key
case 36:
currentRow = firstRow;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ currentRow - 1 ].offsetTop;
return false;
break;

// Num Pad 7 (Home) Key
case 103:
currentRow = firstRow;
highlightRow( trs[ currentRow ] );
div.scrollTop = trs[ currentRow - 1 ].offsetTop;
return false;
break;

// Upward Arrow Key
case 38:
if ( parseInt( currentRow ) == parseInt( 1 ) )
{
// reached the top of the table; do nothing.
return true;
} else
{
// move one row up.
currentRow--;
highlightRow( trs[ currentRow ] );
if ( currentRow%threshold == 0 )
{
scroll( -1, currentRow, threshold );
}
return false;
}
break;

// Num Pad 8 (Upward Arrow) Key
case 104:
if ( parseInt( currentRow ) == parseInt( 1 ) )
{
// reached the top of the table; do nothing.
return true;
} else
{
// move one row up.
currentRow--;
highlightRow( trs[ currentRow ] );
if ( currentRow%threshold == 0 )
{
scroll( -1, currentRow, threshold );
}
return false;
}
break;

// Downward Arrow Key
case 40:
if ( parseInt( clicked ) == parseInt( 1 ) )
{
currentRow = highlightedRow.rowIndex;
clicked = 0;
return false;
}
if ( currentRow == ( numRows - 1 ) )
{
// reached the end of the table; do nothing
return true;
} else
{
currentRow++;
highlightRow( trs[ currentRow ] );
if ( currentRow%threshold == 1 )
{
scroll( 1, currentRow - 1, threshold );
}
return false;
}
break;

// Num Pad 2 (Downward Arrow) Key
case 98:
if ( currentRow == ( numRows - 1 ) )
{
// reached the end of the table; do nothing
return true;
} else
{
currentRow++;
highlightRow( trs[ currentRow ] );
if ( currentRow%threshold == 1 )
{
scroll( 1, currentRow - 1, threshold );
}
return false;
}
break;
}

function scroll( dir, current, nbr )
{
for ( var r = 0; r < trs.length; r++ )
{
if ( ( trs[r].offsetTop + trs[r].offsetHeight ) > div.offsetHeight) break;
}
if ( dir == 1 )
{
div.scrollTop = trs[ current ].offsetTop;
} else
{
div.scrollTop = trs[ current + dir*nbr ].offsetTop;
}
}

function scrollPage( current )
{
highlightRow( trs[ current ] );
div.scrollTop = trs[ current - 1 ].offsetTop;
}
}

function zxcEventObj(zxce)
{
var zxceobj;
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}

function resetTextField( form, field )
{
fieldName = "countriesList" + ":" + "filter";
form[fieldName].value = "";
}

</script>
<title>Subject's Country of Citizenship</title>
</head>
<f:view>
<body class="bodyDefault">
<h:form id="countriesList">
<p>
<p>
<div align="center">
<h:outputText value="Find " styleClass="textDefault"/>
<h:inputText id="filter" style="width:25em;" styleClass="withoutTextDefault" onkeypress="executeSearch( event )"/>
<p>
<div style="height:12em; width:20em;" id="container" class="scrollbar">
<h:dataTable value="#{countriesManagementBean.countriesList}" var="country"
id="countryTable" styleClass="lovTableDefault"
border="0" cellspacing="1" bgcolor="#FFFFFF"
headerClass="tableHeaderDefault" columnClasses="codeColumn, descriptionColumn"
onkeydown="processKeys( event )" onmouseup="selectRow( this )"
ondblclick="addOnclickToDatatableRows();chooseCountry()">
<h:column>
<f:facet name="header">
<h:outputText style="width:7em;" value="Code"/>
</f:facet>
<h:outputText value="#{country.code}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="width:30em;" value="Description"/>
</f:facet>
<h:outputText value="#{country.description}"/>
</h:column>
</h:dataTable>
</div>
<f:verbatim>
<script>
addOnclickToDatatableRows();
</script>
</f:verbatim>
</div>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
<tr><td><br/></td></tr>
<tr>
<td>
<table align="center" width="20%">
<tr>
<td>
<h:commandButton type="button" value="Find"
styleClass="buttonDefault" onclick="ValidateBlankField()"/>
</td>
<td style="width:1em;"><br/></td>
<td>
<h:commandButton value="OK"
onclick="chooseCountry()" styleClass="buttonDefault"/>
</td>
<td style="width:1em;"><br/></td>
<td>
<h:commandButton value="Cancel" onclick="self.close()" styleClass="buttonDefault"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
<script language="JavaScript1.1">
var table = document.getElementById( 'countriesList:countryTable' );
var trs = table.getElementsByTagName( 'tr' );
highlightRow( trs[ firstRow ] );
trs[ firstRow ].focus();
currentRow = trs[ firstRow ].rowIndex;
document.onkeydown = function( event ){ processKeys(event); };
document.onkeypress = function( event ){ executeSearch( event ); };
</script>
</body>
</f:view>
</html>

jiapei_jen
07-17-2007, 02:05 PM
Hi VW, please kindly take a look at my code and provide instructions on how to handle the problem. Thank you.

vwphillips
07-17-2007, 07:31 PM
I have looked at your code but am afraid I can't help you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum