• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Two HTML Elements Use the Enter Key to Invoke Two Different Functions

 
Ranch Hand
Posts: 1309
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ).

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?

[ July 12, 2007: Message edited by: JiaPei Jen ]
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Are you sure that they're not both firing?
 
JiaPei Jen
Ranch Hand
Posts: 1309
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am not sure whether they both fire. If it is so, how do I fix the problem?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If you don't want the event to bubble up the DOM hiearchy, you need to stop propagation of the event. Set the cancelBubble proprety of the event to true for IE, and call the stopPropagation() method of Event in real browsers.
 
JiaPei Jen
Ranch Hand
Posts: 1309
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I use IE6. Anyway, I used stopPropagation in addition to cancelBubble (see the code shown below).

The executeSearch( e ) function (by pressing the Enter key) 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 disappeared and the original screen (before the invocation of the function) was displayed.

Question 1:

How do I "hold" the result of the executeSearch(e) on the screen?

Question 2:

Within the 'table', which is enclosed by <div>, I have functions invoked by key strokes. And I also have functions invoked by mouse clicks. The key strokes functions work if I keep using keyboard keys. The mouse clicks functions work if I click mouse. However, if I mix using mouse clicks and key strokes, the functions invoked by key strokes falter. How this kind of problem can be resolved?

Thank you for your help.
 
Pay attention! Tiny ad!
a bit of art, as a gift, that will fit in a stocking
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic