Add an "onkeyup" event.

Question

Neo7 0 Newbie Poster

14 Years Ago

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:

<input type="text"  name="hello" value="" class="input-tags" onkeyup="foo();"/>

But I want to do something like this:

<script type="text/javascript">
document.getElementsByName("hello").item(0).addEventListener('keyup',foo(),true);
</script>

and leave the input declaration like this:

<input type="text"  name="hello" value="" class="input-tags"/>

Thanks for your time :)

javascript

2 Contributors
4 Replies
934 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Neo7

All 4 Replies

essential 84 Posting Shark

14 Years Ago

Hi,

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

<!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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Neo7 0 Newbie Poster · Answer 1 · 2009-09-01T07:25:16+00:00

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.

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-09-01T18:50:01+00:00

Hi Neo,

try this:

<!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">&#32;<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>

Neo7 0 Newbie Poster · Answer 3 · 2009-09-02T14:14:25+00:00

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:

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:

<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:

<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.

Add an "onkeyup" event.

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers