Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 63024
  • Last Modified:

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>
0
Batalf
Asked:
Batalf
  • 9
  • 5
  • 3
  • +1
1 Solution
 
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
 
archrajanCommented:
Try this:
 var clickName = new Function("updateTa()");
            bodyRef.onkeyup = clickName;
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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:
in that case, put this code in "onload" event of the body

document.getElementById("DHTMLEditor").contentWindow.document.addEventListener("keypress", myFunction, true);
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 9
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now