Need better JS function then onChange()

They have: 46 posts

Joined: May 2002

Hi,

In the 2nd Ed of O'Reilly's JavaScript book (the rhino), p.395 says...

"The onchange() handler is not invoked every time the user enters or deletes a character in a text-entry form element. onchange() is not intended for that type of character-by-character event handling. Instead, onchange() is invoked when the user's edit is complete." (which happens when focus is moved off of that element)

But, I've been to web pages where something happened every time I typed a single character into a text field without me changing focus. I looked at the JavaScript on those pages but it was extremely cryptic.

Anybody know how to achieve this character-by-character event handling with JavaScript? Even just a conceptual explanation would be much appreciated...

Thanks.

Mark Hensler's picture

He has: 4,048 posts

Joined: Aug 2000

tags have the following JS events:
onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect

I would say, use onkeypress to triger a custom function. You could then compare th input value before the key was pressed (string length - 1), and the key pressed (char at string length), and decide what to do about it.

Mark Hensler
If there is no answer on Google, then there is no question.

Abhishek Reddy's picture

He has: 3,348 posts

Joined: Jul 2001

The onkey* listeners don't detect changes made by mouse (copy/paste).

Depending on your circumstances, you may or may not want to trigger the string compare function with onfocus and onclick events.

Something to keep in mind. Wink

They have: 46 posts

Joined: May 2002

Thank you very much. I think I need a more recent edition of a JavaScript book!

In IE, I could not get onkeypress to work, but I could get onkeyup to work.

In Netscape I could not get either to work.

So I will still use onfocus/onchange on my page, and add in onkeyup for the benefit of my visitors who are fortunate enough to use IE.

dk01's picture

He has: 516 posts

Joined: Mar 2002

I have to use this when I want netscape to work with mousedown, mousemove, and mouseup:

<head>
&lt;script language="Javascript"&gt;
if(document.layers)
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = evtMousedown;
document.onmousemove = evtMousemove;
document.onmouseup = evtMouseup;

function evtMousedown(evt) {
// Function with mousedown stuff, variable "evt" is the clicked object.
}

function evtMousemove(evt) {
// Function with mousemove stuff
}

function evtMouseup(evt) {
// Function with mouseup stuff
}
&lt;/script&gt;
</head>
'

Maybe it can be modified for onkeypress or onkeydown.
-dk

They have: 46 posts

Joined: May 2002

That looks very interesting. I will try it. Thank you very much.

dk01's picture

He has: 516 posts

Joined: Mar 2002

No prob. Post it if you get it please. Good luck.
-dk

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.