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>
LVL 32
BatalfAsked:
Who is Participating?
 
davidlars99Connect With a Mentor Commented:
in that case, put this code in "onload" event of the body

document.getElementById("DHTMLEditor").contentWindow.document.addEventListener("keypress", myFunction, true);
0
 
archrajanCommented:
Batalf
in IE also i am not able to gt it to work..
what does this script do???
0
 
BatalfAuthor Commented:
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
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
archrajanCommented:
Try this:
 var clickName = new Function("updateTa()");
            bodyRef.onkeyup = clickName;
0
 
archrajanCommented:
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...
0
 
BatalfAuthor Commented:
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
0
 
davidlars99Commented:
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>
0
 
davidlars99Commented:
so I guess in your case

 if (!document.all){
       window.captureEvents(Event.KEYPRESS);
       window.onkeypress=handler;
  }else{
       document.onkeypress = handler;
  }
0
 
BatalfAuthor Commented:
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
0
 
davidlars99Commented:
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()">
0
 
davidlars99Commented:
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!!!
0
 
BatalfAuthor Commented:
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

0
 
davidlars99Commented:
addEventListener(...) is supported only by Gecko DOM
0
 
davidlars99Commented:
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
0
 
davidlars99Commented:
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
0
 
Michel PlungjanIT ExpertCommented:
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?
0
 
BatalfAuthor Commented:
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!
0
 
davidlars99Commented:
you're welcome!  :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.