...

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



ConfusedOfLife
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();">

brothercake
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
eval(document.getElementById("keybox").getAttribute("onkeypress"));

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


</script>

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

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

function extendEvent(oElement,sEvent,fnNew){
oElement=oElement||window;
sEvent=/^on/.test(sEvent)?sEvent:'on'+sEvent;
var
fnOld=oElement[sEvent]||function(){};
return (oElement[sEvent]=function(){
var res=[
fnOld(),
fnNew()
];
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!)

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

bijan

liorean
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.
[list=1]
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:

var
array=[
first element,
...,
last element
];

var
object={
identifier: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]

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

eval(document.getElementById("keybox").getAttribute("onkeypress"));

with the call to your function:

firstThing();

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

ConfusedOfLife
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?



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


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

liorean
04-03-2003, 04:47 PM
Try replacing that function with:
function(e){
e=e||window.event;
alert(e.keyCode||e.which);
}

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

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum