View Full Version : Adding a new function to onkeypress of an input

04-02-2003, 10:29 AM
Hi, Let's say I have an input like this:

<input type="text" onkeypress="doSomething();">

How can I dynamically add a new function to onkeypress without deleting the previous function? I wana do it via a script and the final thing should look like this ( I mean it should behave like this! ):

<input type="text" onkeypress="doSomething(); doSomethingelse();">

04-02-2003, 11:35 AM
afaik, if you a bind an event handler to an element you always nullify its existing event handler. But you can read the existing handler with getAttribute and use eval() to call it; something like:

<script type="text/javascript">

//this is the original function
function firstThing()
alert("first thing");

//this adds extra handler to element
window.onload = function()
document.getElementById("keybox").onkeypress = function()
//evaluate existing function call

//do whatever else you want
alert("second thing");


<input id="keybox" type="text" onkeypress="firstThing()">

04-02-2003, 12:27 PM
Why not do this:

function extendEvent(oElement,sEvent,fnNew){
return (oElement[sEvent]=function(){
var res=[
return (res[0]&&res[1]);
}I just wish you could have done Function.prototype.extend(fnNew) instead, but JavaScript doesn't allow you to overwrite this.

(This is my 200th post. yay!)

04-02-2003, 09:47 PM
Thank you both, you really helped.

To be honest dear liorean, since you're much better than me in JS, I can't understand your code! Brothercake's code looks easier and I can understand it, so, I think I'm gonna use it.

Even though not related to this thread, but I was looking for this functionality because I had one function that had to be called for unknown times for unknown variables in an onkeypress. So, I wanted to add to the number of functions in onkeypress whenever I had to add a new variable dynamically. But now I'm looking at the problem from a different angle! I defined an attribute for my input field that I keep an array in it. This array contains those elements ( variables ) and in each onkeypress I iterate through the array elements ( You were in that post that I asked about my problem with fancy attributes not working in NS7 ). So, my problems is somehow solved, but thank you both for teaching me a new thing.


04-02-2003, 10:11 PM
Oh, I guess I'm using a few shortcuts instead of more familiar features... If you were a c/c++ programmer, you wouldn't even think about it - they come naturally.
Instead of if..else, I use conditional:

condition?expression if true:expression if false;

I also use shortcut validation when able:

first expression||second expression;

If the first expression evaluates to anything other than undefined, null, false, 0 or an empty string, it returns the result of the first expression. Otherwise, it returns the result of the second expression.

first expression&amp;&amp;second expression;

If the first expression evaluates to anything of undefined, null, false, 0 or an empty string, it returns the result of the first expression. Otherwise, it returns the result of the second expression.

I like to use array and object literals:

first element,
last element

last identifier:element

I also use regular expressions frequently. For more info on regular expressions, see my tutorial about them on evolt (http://evolt.org/article/Regular_Expressions_in_JavaScript/17/36435/) or javascript kit (http://www.wsabstract.com/javatutors/redev.shtml).[/list=1]

04-02-2003, 11:19 PM
Interesting ... I must admit, I find your code a bit difficult to follow sometimes - I also use object and array literals, ternary statements, and regular expression tests, but I don't like to miss out braces because it makes the flow of logic more difficult to trace, and I don't 'approve' of automatic-type conversion when evaluating statements - scripts execute more quickly if you code to strict.

ConfusedOfLife - incidentally - that code I posted reads and evaluates whatever keypress function-call is there, which is useful because you don't have to know what it is. But (I guess I should mention) it doesn't work in IE - the first function simply won't be called.

You can make it work in IE, if you can call the function by name, just by replacing:


with the call to your function:


04-02-2003, 11:43 PM
Actually, I try to code to mozilla's strict warnings as much as possible - but sometimes I fall back to my older, more load-optimised style. And I agree, dropping braces makes the code less easy to read. I try to compensate for this by adhering strictly to a consistent use of indentation.

Well, I'll try to think about making my code easier to follow, at least when I write a code example.

Maybe my use of hungarian notation also hurts readability a bit - but it makes variable names so much shorter and you can see what type they are of directly.

04-03-2003, 01:03 PM
Thanks liorean, now I can read better! You're right, I'm not a C/C++ coder, but I knew about the ternary operator. That part of your code that you used regular expressions to add "on" at the beginning of an event was somehow beautiful/confusing! Thanks for the explanation, I'll use some parts of them myself too :rolleyes: About the hungraian notation, lots of ppl say it's bad and lots of them say it's fine, but well, I think if you're used to anything, you should continue that, coz you can write best in your own method.

Brothercake, as you said your code doesn't work under IE and well, I don't think it's a good idea to add the name of the first function manually ( what's the use of a function?! ), and unfortunately I can't do it in this case. Anyways, I'm gonna take a closer look at liorean's function.

Another question: I have a sample code that works in IE, but not in NS, do you know what's wrong with it?

<input type="text" id="oopse">
document.getElementById("oopse").onkeypress = function() { alert(event.keyCode) }

I even tried e.which instead of event.keyCode but this damn NS doesn't answer.

04-03-2003, 04:47 PM
Try replacing that function with:

04-03-2003, 04:50 PM
What about attachEvent and addEventListener? Both allow you to attach an indefinite number of actions to a single event handler.

04-03-2003, 05:05 PM
How is iem, saf/konq, op7 and iCab support for them? Some time ago (before saf and op7), only iew and moz handled them.

04-03-2003, 05:10 PM
Not sure, but I do know this. The wizards over at DHTML kitchen use a file they made regularly, global.js (http://www.dhtmlkitchen.com/search/index.jsp?q=global.js), that has a wicked-cool wrapper to help browsers lacking these handy methods.

I'll be honest with you, I don't fully understand how it works, but I think I got a rough idea. Suffice to say, I didn't look at it and go "Oh, I see how they did that".