AJAX

Add an "onkeyup" event.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Oct 2008

Posts: 15

Reputation: Neo7 is an unknown quantity at this point

Solved Threads: 0

Neo7

Offline

Newbie Poster

Add an "onkeyup" event.

Aug 31st, 2009

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:

 Help with Code Tags 
 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:

 Help with Code Tags 
 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:

 Help with Code Tags 
 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

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Add an "onkeyup" event.

Aug 31st, 2009

Hi,

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

 Help with Code Tags 
 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>

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Oct 2008

Posts: 15

Reputation: Neo7 is an unknown quantity at this point

Solved Threads: 0

Neo7

Offline

Newbie Poster

Re: Add an "onkeyup" event.

Aug 31st, 2009

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.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Add an "onkeyup" event.

Sep 1st, 2009

Hi Neo,

try this:

 Help with Code Tags 
 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>

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Oct 2008

Posts: 15

Reputation: Neo7 is an unknown quantity at this point

Solved Threads: 0

Neo7

Offline

Newbie Poster

Re: Add an "onkeyup" event.

Sep 2nd, 2009

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:

 Help with Code Tags 
 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:

 Help with Code Tags 
 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:

 Help with Code Tags 
 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.