asked on

onkeydown event - Firefox

Dear all experts!

This is a Firefox related question.

Can someone show me how to dynamically add a keydown event to the iframe in the code below, so that the updateTa() function is executed and the text area updated with the HTML code of the iframe?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
      <title>My DHTML Editor</title>
      <style type="text/css">
      #DHTMLEditor,#DHTMLsrc{
            width:500px;
            height:500px;

      }
      #DHTMLsrc{

      }
      #DHTMLEditor{
            border:1px solid #000000;
            margin:0px;
      }
      </style>
      <script type="text/javascript">
      var bodyRef;
      var taRef;
      var editorRef;
      function updateTa(){ // THIS FUNCTION IS NEVER EXECUTED ON FIREFOX - WHY?
            taRef.value=bodyRef.innerHTML;
            alert('hello');
      }
      function initEvents(){
            bodyRef.onkeyup=updateTa; // THIS DOESN'T WORK ON FIREFOX
      }

      function editorInit(){
            taRef = document.getElementById('DHTMLsrc');
            if(!document.all){
                  document.getElementById("DHTMLEditor").contentDocument.designMode="on";
                  bodyRef= document.getElementById("DHTMLEditor").contentDocument.body;
                  editorRef= document.getElementById("DHTMLEditor");
                  bodyRef.innerHTML = document.getElementById('DHTMLsrc').value;
            }else{
                  bodyRef = document.getElementById("DHTMLEditor");
                  editorRef = document.getElementById("DHTMLEditor");
                  bodyRef.innerHTML = document.getElementById('DHTMLsrc').value;
            }
            initEvents();
      }
      window.onload = editorInit;
      </script>
</head>
<body>
            <iframe frameborder="0" marginheight="0" marginwidth="0" id="DHTMLEditor"></iframe>
            <textarea id="DHTMLsrc">Init <b>Content</b> is comming here</textarea>

</body>
</html>

archrajan

Batalf
in IE also i am not able to gt it to work..
what does this script do???

Batalf

ASKER

Hi Arhana, The script doesn't have to work in IE. I'm using server side scripts to determine which code to give out to different users. Firefox users will see the Iframe, while IE users will se an editable div. The IE solution is working fine.

I'm researching the possibilities of a wysiwyg HTML editor.

Batalf

archrajan

Try this:
var clickName = new Function("updateTa()");
bodyRef.onkeyup = clickName;

archrajan

I dont think thats possible either..
i doubt if the onkeyup event will work on iframe for firefox..
shud do a lot of research i gues...

Batalf

ASKER

Thank you, but that didn't work either.

- The iframe at the left is editable, it means that you could write in it.

When you write, I need the textarea at the right/below to be updated with the HTML content of the editable iframe. When you open the page in your Firefox browser, you will see this text "Init <b>Content</b> is comming here" in the textarea. This is the HTML code of the iframe. When you write in the iframe, I need this text to be updated dynamically.

You might be right that it's not possible, but of course I hope you're not:-) I really need this to work.

If it doesn't, then I need input from experts who are familiar with Wysiwyg editors on Firefox. Maybe there are alternative solutions. I will both need onkeyup and onkeydown events. Example. When someone clicks Ctrl+B, I want to make a function that converts the selected text into bold.

Batalf

davidlars99

I answred same type of question and here they are

[capturing enter key on body]

<html>
<head>
<script language=javascript>

var key1="13";
var x='';

function handler(e){
if (document.all){
var evnt = window.event;
x=evnt.keyCode;
}else{
x=e.keyCode;
}
if(x==key1)
alert('you cliked enter");
if (!document.all){
window.captureEvents(Event.KEYPRESS);
window.onkeypress=handler;
}else{
document.onkeypress = handler;
}
}

</script>
</head>
<body onkeydown="handler(event)">
<form name="myform">

</form>
</body>
</html>

[capturing event on an object]

<html>
<head>
<script language=javascript>

var items;

function init(){
      items=document.getElementById('all_items');
}

function position(txtOb){
      for(var i=0;i<items.length;i++)
            if(items[i].text.substring(0,txtOb.value.length).toLowerCase()==txtOb.value.toLowerCase())
                  items.selectedIndex=i

      return true
}

</script>

</head>
<body onload="setTimeout('init()', 10)">

<input type="text" name="txtKeyword" id="idKeyword" value="Ariz" onkeydown="position(this)" />

<select name="all_items" id="all_items">
      <option Value="" selected>Choose a State
      <option Value="AL">Alabama
      <option Value="AK">Alaska
      <option Value="MD">Maryland
      <option Value="NJ">New Jersey
      <option Value="NM">New Mexico
      <option Value="NY">New York
      <option Value="NC">North Carolina
      <option Value="ND">North Dakota
      <option Value="OH">Ohio
      <option Value="PA">Pennsylvania
      <option Value="RI">Rhode Island
      <option Value="SC">South Carolina
      <option Value="VT">Vermont
      <option Value="VA">Virginia
      <option Value="WA">Washington
</select>

</body>
</html>

davidlars99

so I guess in your case

if (!document.all){
window.captureEvents(Event.KEYPRESS);
window.onkeypress=handler;
}else{
document.onkeypress = handler;
}

Batalf

ASKER

Thank you, davidlars99!

I know how to assign events, so that's not the big problem here:-). The problem is that the onkeyup event of this editable iframe never fires. If you try my code, I need the function

function updateTa(){ // THIS FUNCTION IS NEVER EXECUTED ON FIREFOX - WHY?
taRef.value=bodyRef.innerHTML;
alert('hello'); // debugging
}

to be executed as onkeyup of the iframe.

Batalf

davidlars99

oh, I see what you mean now, is that function in a page where iframe is comming or it's in the page where iframe resides...?

don't do it like this
<iframe src="http://www.whatever.com/page.htm" onkeyup="sample()" />

instead you should open up "http://www.whatever.com/page.htm" file in editor and add onkeydown event onto its body tag

[page.htm]
<body onkeydown="sample()">

davidlars99

or

document.getElementById("myiframe").document.body.onkeyup=myfunction;

if not then this

window.frames["fr"].document.body.onkeyup=myfunction;

where "fr" is the name of iframe NOT ID!!!

Batalf

ASKER

Thank you, but that didn't seem to work either.

The iframe doesn't have a file as source. That's why I need to assign the event dynamically. This IFRAME solution is Firefox alternative to <DIV contentEditable> in Internet Explorer.

Ref: http://www.mozilla.org/editor/midas-spec.html

I think you have to open the source code above and play with it in order to find a solution. I appreciate you for trying:-)

Batalf

ASKER CERTIFIED SOLUTION

davidlars99

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

davidlars99

addEventListener(...) is supported only by Gecko DOM

davidlars99

when working with such advanced things like rich text editor and wondering about cross browser compatibilities it is always good to know what's supported and what's not in different browsers I'd recommend to use "my favorite method" :)

<script language=javascript>
function check(){
      var ob;
      for(ob in document.getElementById("DHTMLEditor"))
            document.write(ob+'<br>')
}
check();
</script>

it is really useful... and here's more Gecko DOM refference

http://www.mozilla.org/docs/dom/domref/dom_shortIX.html

one you need for addEventListener(...) is this > http://www.mozilla.org/docs/dom/domref/dom_el_ref31.html

davidlars99

I think you also should be able to use direct refference, but not sure about that...

document.getElementById("DHTMLEditor").contentWindow.document.onkeypress=myFunction

let me know if this works

Michel Plungjan

If you have a link
onClick="document.getElementById("DHTMLEditor").contentDocument.body.onkeyup=updateTa"

and it works, then I think you have a timing issue.

No errors in the javascript console?

Batalf

ASKER

document.getElementById("DHTMLEditor").contentWindow.document.addEventListener("keypress", updateTa, true);

worked. I find it strange that

document.getElementById("DHTMLEditor").contentWindow.document.onkeypress = updateTa;

didn't. There were noe errors in the Javascript concole, the event just didn't fire. Thank you davidlars99!!! Great work!

davidlars99

you're welcome! :)