Cross browser event handler must capture [ENTER]

Question

Inside a function I have an event handler. So far so good. But in that event handler I want to capture Enter pressed and replace that for a HTML.

I've done it like this:

    CrossBrowserEventHandler(Editor, 'keyup', function(Event) { myFunctionRef(idname, Event) });
    var myFunctionRef = function myFunction(idname, Event)
    {
        var keyCode;
        if (!Event && window.event) {
            Event = window.event;
        }
        if (Event) {
            keyCode = (window.Event) ? Event.which : Event.keyCode;

            if (keyCode == 13) {
                Event.target.ownerDocument.execCommand("inserthtml",false,'<br />');
                Event.returnValue = false;
            }
        }
        PushText(idname); /* pushes the input from a rich text iframe to a textarea */
    }

The cross browser event handler function looks like this:

function CrossBrowserEventHandler(target,eventName,handlerName)
{
    if (target.addEventListener) {
        target.addEventListener(eventName, handlerName, false);
    }
    else if (target.attachEvent) {
        target.attachEvent("on" + eventName, handlerName);
    }
    else {
        target["on" + eventName] = handlerName;
    }
}

In the first part I capture the keycode 13 (return) and replace it via an execCommand to a HTML line break. It does that, but twice. It doesn't cancel/remove the actual return-pressed event.

Any ideas (besides the standard advice to use a JS framework, which I can't for numerous reasons, one of them being the process of actually learning something)?

VinayC · Answer 1 · 2010-09-20T07:24:13.727

0

Shouldn't you be capturing key-code 10 instead of 13? 10 stands for newline character while 13 stands for carriage return.

EDIT: You may be getting the event twice either a) you might have registered it twice or b) event might be bubbling up. For b, I will suggest that you cancel bubbling such as

 ...
       if (keyCode == 13) {
            Event.target.ownerDocument.execCommand("inserthtml",false,'<br />');
            Event.returnValue = false;
            Event.cancelBubble = false;
        }
 ...

Yet, another suggestion is to return false from the event handler function. For example,

 ...
        Event.returnValue = false;
        Event.cancelBubble = false;
        return false;
    }
 ...

And

CrossBrowserEventHandler(Editor, 'keyup', function(Event) { return myFunctionRef(idname, Event) });

edited Sep 20 '10 at 07:24

answered Sep 20 '10 at 06:04

VinayC

47,395
5
59
72

In this case I want to capture 13, not 10. – Léon Sep 20 '10 at 06:33
Doesn't work unfortunately, it still passes the enter followed by the execCommand. Let me elaborate on this. It's used for a Rich Text Area function and since most browsers translate a return into a HTML paragraph (IE & FF) or into a linebreak enclosed within div's, I want it to translate a return into a linebreak for uniformity's sake. – Léon Sep 20 '10 at 07:52
@Leon - how about handling keydown event instead of keyup? – VinayC Sep 20 '10 at 08:07
Problem with keydown in this case, is that it is always one keystroke behind. I need to capture all the keystrokes in this case. Can I create two events, one that captures onkeydown enter and one onkeyup that captures the rest? – Léon Sep 20 '10 at 08:33
I believe that you can handle both keyup and keydown event. But not sure how keydown can be behind of keyup. Generally, keydown is not captured because pressing down a key for a while generates series of down events it it always occurs before keyup event. – VinayC Sep 20 '10 at 09:50

Cross browser event handler must capture [ENTER]

1 Answers1

Linked