cancelling keydown event in designmode(rich text editing) in firefox

pvsundarram · May 2, 2007

hey,
i am trying to cancel the keydown event for certain keycodes( for eg:-
enter key ).But the cancelling of this event is not happening in
firefox. Is there any way to cancel the event in the iframe.
CODE
=====
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US"
xml:lang="en_US">
<HEAD>
<SCRIPT>
var isIE = document.all;
function chgSpan() {
var newState;
var currentState;
var oSpan = GetObject( "oSpan" );
var oBtn = GetObject( "oBtn" );
InitEventListener();
currentState = (isIE)? oSpan.isContentEditable :
(oSpan.contentDocument.designMode == "on") ;
newState = !currentState;
if(isIE)
oSpan.contentEditable = newState;
else
oSpan.contentDocument.designMode = (newState)? "on" : "off";
newState==false ? oBtn.value="Enable Editing" :
oBtn.value="Disable Editing";
}
function onEnterEvent(e)
{
if(!e)
e = window.event;
var key = (isIE)? e.keyCode : e.which;
alert("onkeydown");
if(key == 13)
{
alert("enter");
return false;
}
}

function InitEventListener()
{
if(isIE)
{
window.document.body.attachEvent("onkeydown",onEnterEvent);
}
else
{

document.getElementById("oSpan").contentWindow.addEventListener("keydown",
onEnterEvent, false);
}
}

function a(ev){
var e = (ev!=undefined)?ev :event;
alert(e);
}

function Init()
{
var EditorBox = (isIE)?
document.createElement("div"):document.createElement("iframe");
EditorBox.id = "oSpan";
EditorBox.name = "oSpan";
document.body.appendChild(EditorBox);
}
function GetObject(idString)
{
return document.getElementById(idString);
}
</SCRIPT>
</HEAD>
<BODY onload="Init();">
<P>Click the button to enable or disable SPAN content editing.</P>
<P>
<input type="button" id="oBtn" value="Enable Editing"
onclick="chgSpan();"/>
</P>
<P></P>
</BODY>
</html>

Thanks in advance....

scripts.contact · May 2, 2007

hey,
i am trying to cancel the keydown event for certain keycodes( for eg:-
enter key ).But the cancelling of this event is not happening in
firefox. Is there any way to cancel the event in the iframe.
CODE

http://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla#Internet_Explorer_Differences

[-- A further difference for Mozilla is that once a document is
switched to designMode, all events on that particular document are
disabled. Once designMode is turned off however (as this now seems
possible in Mozilla 1.5) the events become active again. --]

var isIE = document.all;

var isIEOrOpera = document.all

pvsundarram · May 2, 2007

hey,

[-- A further difference for Mozilla is that once a document is
switched to designMode, all events on that particular document are
disabled. Once designMode is turned off however (as this now seems
possible in Mozilla 1.5) the events become active again. --]

i am running firefox(2.0.0.3/Mozilla 5.0), the events are always
active and they get reported....
the problem i am facing is, the eventhandler is getting called after
the character is getting rendered, and in the end i am unable to
suppress that event.

is there any other way by which one can suppress the event....

var isIEOrOpera = document.all

Noted.... ;-)

Thanx again.....

keep clickin',
P V Sundarram.

rf · May 2, 2007

hey,
i am trying to cancel the keydown event for certain keycodes( for eg:-
enter key ).But the cancelling of this event is not happening in
firefox. Is there any way to cancel the event in the iframe.

e.preventDefault();

<snip rather irregular code>

pvsundarram · May 2, 2007

hey,

e.preventDefault();

it doesnt work....the eventhandler is getting called after the
character is getting rendered.....

Thanx again.....

keep clickin',
P V Sundarram.

rf · May 2, 2007

hey,

it doesnt work....the eventhandler is getting called after the
character is getting rendered.....

Hmmm.

Where did you preventDefault();?

I am currently writing a an RT editor and it works for me.

Ok. Timeout. <copy/paste>

Did you notice that a single enter produces two "enter"s (that is <br>'s)
in the iframe?

I removed the alert(onkeydown) and added, in its place, e.preventDefault();

That changed the rules. No keystrokes at all are passed on to the iframe,
*except* the enter key. It's being passed to the iframe from somewhere else.
This should give you something to work on.

BTW your code is very hard to read/debug. Layout is bad, but that could be
my newsreader. Some comments might help.

You are doing some things that you should not do, for example relying on
document.all to suggest IE and only IE. Check for the feature you are just
about to use, not some random other one.

BTW 2, intercepting the enter key and trying to duplicate what browsers do
(so as to presumably make them all work like IE, which gets it right in this
instance) is not the way to go for a RT editor. You will end up with lots
and lots of convoluted DOM manipulations. I know. I have been there. Look at
fckeditor or tinymce etc for example. Dreadfull code.

Simply let the browser do whatever it wants to do with the enter key and
then sneak in afterwards and clean up the mess. WYMeditor takes this
approach.

brunascle · May 2, 2007

var isIEOrOperaOrAnyOtherBrowserThatSupportsDocumentDotAll = document.all

var isBrowserThatReturnsTrueForDocumentDotAll = document.all;

// because some browsers support it but return false, to help with
browser identification and/or to help choose the right implementation
to use

pvsundarram · May 3, 2007

hey,

Where did you preventDefault();?

if(key == 13)
{
e.preventDefault();
return false;
}
and it works...... but it doesnt work when you put an alert there....

any idea why it would behave in this fashion????

I removed the alert(onkeydown) and added, in its place, e.preventDefault();

That changed the rules. No keystrokes at all are passed on to the iframe,
*except* the enter key. It's being passed to the iframe from somewhere else.
This should give you something to work on.

BTW your code is very hard to read/debug. Layout is bad, but that could be
my newsreader.

something to do with ur reader i guess....;-)

keep klickin',
P.V. Sundarram

Rich Text Editing, designMode, and Javascript (again)	3	Oct 3, 2006
Rich Text Form in JavaScript gives error: Object required	1	Jul 6, 2005
Cancel Event in Firefox	11	Nov 4, 2005
IE Not Stopping Default Event	4	Apr 5, 2007
Drag&drop Javascript freezing in Firefox 2	1	Jan 23, 2008
The old "there no event object in Firefox" question again	19	Jan 22, 2009
Event registration in Firefox 2.0	2	Jan 3, 2008
Event cancelinf in Firefox	0	Feb 18, 2006

cancelling keydown event in designmode(rich text editing) in firefox

pvsundarram

scripts.contact

pvsundarram

rf

pvsundarram

rf

brunascle

pvsundarram

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads