Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 8617

Aug 31st, 2009

Add an "onkeyup" event.

Expand Post »

Hi everybody,

What should I do in order to add an onkeyup="foo();" to an input box but without writing the onkeyup="foo();" inside the input field declaration?
Usually you do:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<input type="text"  name="hello" value="" class="input-tags" onkeyup="foo();"/>
<input type="text"  name="hello" value="" class="input-tags" onkeyup="foo();"/>

But I want to do something like this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script type="text/javascript">
document.getElementsByName("hello").item(0).addEventListener('keyup',foo(),true);
</script>
<script type="text/javascript">
document.getElementsByName("hello").item(0).addEventListener('keyup',foo(),true);
</script>

and leave the input declaration like this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<input type="text"  name="hello" value="" class="input-tags"/>
<input type="text"  name="hello" value="" class="input-tags"/>

Thanks for your time

Similar Threads

"enter" event in C#
it gives "not initialised" on the Applet in Java
Creating a "Data" folder in my C: Drive using my Java program in Java
Quick question about "getLocation()" in Java
"add this site to your bookmarks" in firefox in JavaScript / DHTML / AJAX

Neo7

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Oct 2008

Permalink

Aug 31st, 2009

Re: Add an "onkeyup" event.

Hi,

here's a simple demonstration of installing events onto target elements':

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Adding Events</title>
<script type="text/javascript">
<!--
var addEvent = Object.prototype.addEvent = ( function( eve, fun ) {
   if ( "addEventListener" in window ) {
      this.addEventListener( eve, fun, false );
   } else {
      var thisEvent = "on" + eve;
      if ( "attachEvent" in window ) {
         this.attachEvent( thisEvent, fun );
      } else {
         this[ thisEvent ] = fun;
      }
   }
} );
// The addEvent function allows you to add any event on target element:
// attaching onload event sample with window ( object ).
window.addEvent( "load", ( function() {
   alert( "\nONLOAD event occured" );
   function whatEvent( e ) {
   var e = e ? e : event;
   alert( "\nON" + ( e.type ).toUpperCase() + " event occured" ); 
   }
   if ( "getElementById" in document ) {
      var div = document.getElementById("hello");
      var input = document.getElementById("world");
 
   } else {
      var div = hello;
      var input = document.all.world;
   } div.addEvent( "click", whatEvent );
   input.addEvent( "keyup", whatEvent );
} ));
 
//-->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div id="hello">OnClick</div>
<div><br><br>
<input type="text" id="world" name="world" value="OnKeyup" size="30">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Adding Events</title>
<script type="text/javascript">
<!--
var addEvent = Object.prototype.addEvent = ( function( eve, fun ) {
   if ( "addEventListener" in window ) {
      this.addEventListener( eve, fun, false );
   } else {
      var thisEvent = "on" + eve;
      if ( "attachEvent" in window ) {
         this.attachEvent( thisEvent, fun );
      } else {
         this[ thisEvent ] = fun;
      }
   }
} );
// The addEvent function allows you to add any event on target element:
// attaching onload event sample with window ( object ).
window.addEvent( "load", ( function() {
   alert( "\nONLOAD event occured" );
   function whatEvent( e ) {
   var e = e ? e : event;
   alert( "\nON" + ( e.type ).toUpperCase() + " event occured" ); 
   }
   if ( "getElementById" in document ) {
      var div = document.getElementById("hello");
      var input = document.getElementById("world");

   } else {
      var div = hello;
      var input = document.all.world;
   } div.addEvent( "click", whatEvent );
   input.addEvent( "keyup", whatEvent );
} ));

//-->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div id="hello">OnClick</div>
<div><br><br>
<input type="text" id="world" name="world" value="OnKeyup" size="30">
</div>
</body>
</html>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Aug 31st, 2009

Re: Add an "onkeyup" event.

It works!!

Thanks Essential for your help, I've already added it to your reputation

Just one more thing, do you know how to prevent ENTER from submitting?
I would like to add an event on a form's input field with your function that onkeypress (ENTER/CARRIAGE RETURN) don't submit the form.

Neo7

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Oct 2008

Permalink

Sep 1st, 2009

Re: Add an "onkeyup" event.

Hi Neo,

try this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
<script type="text/javascript">
<!--
var addEvent = Object.prototype.addEvent = ( function( eve, fun ) {
   if ( "addEventListener" in window ) {
       this.addEventListener( eve, fun, false );
   } else {
   var thisEvent = "on" + eve;
      if ( "attachEvent" in window ) {
         this.attachEvent( thisEvent, fun );
      } else {
         this[ thisEvent ] = fun;
      }
   }
} );  
 
//-->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div id="div">
<form id="frm" name="frm" action="#">
<div>Name: <input type="text" value="" size="20"> <input type="submit" value="submit"></div>
</form>
</div>
<script type="text/javascript">
<!--
 
   var form = ( "frm" in document ) ? frm : document.getElementById("frm");
  form.addEvent( "submit", function( e ) {
   var e = e ? e : event;
   var keys = ( e.keyCode ) ? e.keyCode : e.which;
   if ( keys !== 13 ) { // if its not an enter key, then replace the action url of the form.
     form.action = "process.php";
     return;
   }  
   } );
//-->
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
<script type="text/javascript">
<!--
var addEvent = Object.prototype.addEvent = ( function( eve, fun ) {
   if ( "addEventListener" in window ) {
       this.addEventListener( eve, fun, false );
   } else {
   var thisEvent = "on" + eve;
      if ( "attachEvent" in window ) {
         this.attachEvent( thisEvent, fun );
      } else {
         this[ thisEvent ] = fun;
      }
   }
} );  

//-->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div id="div">
<form id="frm" name="frm" action="#">
<div>Name: <input type="text" value="" size="20"> <input type="submit" value="submit"></div>
</form>
</div>
<script type="text/javascript">
<!--

   var form = ( "frm" in document ) ? frm : document.getElementById("frm");
  form.addEvent( "submit", function( e ) {
   var e = e ? e : event;
   var keys = ( e.keyCode ) ? e.keyCode : e.which;
   if ( keys !== 13 ) { // if its not an enter key, then replace the action url of the form.
     form.action = "process.php";
     return;
   }  
   } );
//-->
</script>
</body>
</html>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Sep 2nd, 2009

Re: Add an "onkeyup" event.

Hi Essential,
Thank you very much for your time and your code

But I'm sorry to say that this time it doesn't work for me

I'm still submitting the form.

Firstable, I copied your code to an empty web page and tried it but he form was submitted.
Then I tried to included it in the real page I would like to fix and after many changes and trials still didn't stop the form from submitting.

It is possible to just ignore the "enter key" in a single input field or it is necessary to block the whole form from submitting?

By the way, I'm using something like this code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
var form = ( "form" in document ) ? form : document.getElementsByTagName("form").item(1);//second form tag=item(1)
var form = ( "form" in document ) ? form : document.getElementsByTagName("form").item(1);//second form tag=item(1)

in order to select the form because it doesn't have any "name" or "id".
I hope that is not the cause for not working.
Also here I left you some code of my webpage's form in case:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<div id="register-box">
	<h2>Register</h2>
	<form   action="http://mywebpage/action/register" method="POST" >
<div id="register-box">
	<h2>Register</h2>
	<form   action="http://mywebpage/action/register" method="POST" >

And an example of one or my input fields within the form:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<label>Username<br/>
<input type="text"   name="username" value="" class="general-textarea"/>
<label>Username<br/>
<input type="text"   name="username" value="" class="general-textarea"/>

None of those can be change beforehand, the only way to select them and to modify its behavior it is with scripting.

Last edited by Neo7; Sep 2nd, 2009 at 5:17 am.

Neo7

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Oct 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript learning resources - for a javascript noobie

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Number of Visible items in DropDown List

DaniWeb Message

Cancel Changes

User Name
Password