?
Solved

onkeydown event - Firefox

Posted on 2005-04-09
18
Medium Priority
?
62,984 Views
Last Modified: 2012-05-05
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>
0
Comment
Question by:Batalf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
  • 3
  • +1
18 Comments
 
LVL 25

Expert Comment

by:archrajan
ID: 13744427
Batalf
in IE also i am not able to gt it to work..
what does this script do???
0
 
LVL 32

Author Comment

by:Batalf
ID: 13744433
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13744456
Try this:
 var clickName = new Function("updateTa()");
            bodyRef.onkeyup = clickName;
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Expert Comment

by:archrajan
ID: 13744462
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
 
LVL 32

Author Comment

by:Batalf
ID: 13744474
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13744580
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13744587
so I guess in your case

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

Author Comment

by:Batalf
ID: 13744601
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13744632
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13744643
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
 
LVL 32

Author Comment

by:Batalf
ID: 13744665
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
 
LVL 13

Accepted Solution

by:
davidlars99 earned 2000 total points
ID: 13745033
in that case, put this code in "onload" event of the body

document.getElementById("DHTMLEditor").contentWindow.document.addEventListener("keypress", myFunction, true);
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13745051
addEventListener(...) is supported only by Gecko DOM
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13745067
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13745077
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13745165
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
 
LVL 32

Author Comment

by:Batalf
ID: 13745313
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13745354
you're welcome!  :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question