Member Avatar for Neo7

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

  • 2 Contributors
  • 4 Replies
  • 937 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Neo7
Member Avatar for essential

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>
Member Avatar for Neo7

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.

Member Avatar for essential

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>
Member Avatar for Neo7

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.

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.