2 Replies Latest reply on Nov 3, 2010 4:46 PM by M.Schenk

    Arrow keys and enter key not functioning in Firefox 3.6 when viewing PDF

    Platipus Eater

      I'm using Adobe Reader 9.3.0.

       

      I have a web application that displays PDFs (using Adobe Reader) in a browser.  The PDF is loaded onto the page inside an IFRAME.  In addition to the IFRAME containing a PDF, the page also includes several forms, text fields, etc. For the most part this is working fine.  However, I have a glitch when using this in Firefox 3.6. I'm finding that certain keyboard events are being lost and I strongly suspect that they are being swallowed by Adobe Reader.  When I place focus on an HTML text field and press enter key or arrow keys, I do not get the appropriate key events.  If I run the exact same test without the PDF IFRAME these key events work correctly, but as soon as I load the PDF into the IFRAME they do not.  I believe the primary key event that gets lost is the keydown event.  I do get the keyup event.

       

      Again, the events work correctly up until I load the PDF onto the page.

       

      I've verified that this error does not occur in Firefox 3.5 and 3.0.

       

      Here is a testcase to reproduce this:


      <html>
      <head>
          <title>JavaScript - Detecting keystrokes</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

       

          <script type="text/javascript">

       

              var pdfURL = 'http://samplepdf.com/sample.pdf';

       

              window.onload = function () {
                  init();
              };

       

              document.defaultAction = true;

       

              function init() {
                  var x = document.getElementById('testForm').getElementsByTagName('input');
                  for (var i=0;i<x.length;i++) {
                      x[i].onclick = setEvents;
                      if (x[i].checked)
                          x[i].onclick();
                  }
                  writeroot = document.getElementById('writeroot');
                  document.getElementById('emptyWriteroot').onclick = function () {
                      writeroot.innerHTML = '';
                      return false;
                  }
              }

       

              function setEvents() {
                  if (this.id == 'default') {
                      document.defaultAction = !this.checked;
                      return;
                  }
                  var eventHandler = (this.checked) ? detectEvent : empty;
                  document.getElementById('textfield')['on'+this.id] = eventHandler;
                  //document['on'+this.id] = eventHandler;
              }

       

              function detectEvent(e) {
                  var evt = e || window.event;
                  writeData('<b>'+evt.type+'</b>:  keyCode=' + evt.keyCode+' : charCode=' + evt.charCode);
                  return document.defaultAction;
              }

       

              function empty() {
                  // nothing
              }

       

              var writeroot;

       

              function writeData(msg) {
                  writeroot.innerHTML += msg + '<br />';
              }
          </script>

       

          <style type="text/css">
              body {
                  font-size: 12px;
              }
              #writeroot {
                  height: 300px;
                  overflow: auto;
                  border: 1px solid #2EB2DC;
              }
          </style>
      </head>

       

      <body>

       

      <form id="testForm">

       

      <input type="checkbox" id="keydown" /> <label for="keydown">keydown</label><br />
      <input type="checkbox" id="keypress" /> <label for="keypress">keypress</label><br />
      <input type="checkbox" id="keyup" /> <label for="keyup">keyup</label><br />
      <input type="checkbox" id="default" /> <label for="default">Suppress default action</label><br />
      <input type="text" id="textfield" /><br />

       

      <button id="emptyWriteroot">Remove messages</button>

       

      </form>

       

      <a href="#" onclick="document.getElementById('docviewer-page').src=pdfURL;return false">Now load IFrame</a>

       

      <p id="writeroot"></p>

       

      <div id="container2" style="border:1px solid black;width:400px;height:200px">
              <iframe
                  id='docviewer-page'
                  name='docviewer-page'
                  title='document page'
                  src='http://www.google.com'
                  align='left'
                  width='100%'
                  height='100%'
                  scrolling='auto'
                  frameborder=0></iframe>
      </div>
      </body>
      </html>

       

      Paste the above into an HTML document.  Open the HTML document in Firefox 3.6.  Check the four checkboxes.  Move into the text field and press arrow keys and enter key to observe the results when it is working correctly.  Then click on the "Now Load PDF" link.  Press the arrow keys and enter key again and observe that the behavior has changed.

       

      Anybody have any idea why this is happening or how to work around it?

        • 1. Re: Arrow keys and enter key not functioning in Firefox 3.6 when viewing PDF
          M.Schenk

          This is also happening on one of our sites exactly as described in the original post.

           

          We need a fix or a workaround!

          • 2. Re: Arrow keys and enter key not functioning in Firefox 3.6 when viewing PDF
            M.Schenk Level 1

            I found a workaround!

             

            By using an object tag instead of an iframe, all the keys seems to work fine and the PDF still renders in the page the same way.

             

            Here's a page that works:

             

            <html>

            <head>

                <title>JavaScript - Detecting keystrokes</title>

                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

                <script type="text/javascript">

                    var pdfURL = 'http://samplepdf.com/sample.pdf';

                    window.onload = function () {

                        init();

                    };

             

                    document.defaultAction = true;

             

                    function init() {

                        var x = document.getElementById('testForm').getElementsByTagName('input');

                        for (var i=0;i<x.length;i++) {

                            x[i].onclick = setEvents;

                            if (x[i].checked)

                                x[i].onclick();

                        }

             

                        writeroot = document.getElementById('writeroot');

             

                        document.getElementById('emptyWriteroot').onclick = function () {

                            writeroot.innerHTML = '';

                            return false;

                        }

                    }

             

                    function setEvents() {

                        if (this.id == 'default') {

                            document.defaultAction = !this.checked;

                            return;

                        }

                        var eventHandler = (this.checked) ? detectEvent : empty;

                        document.getElementById('textfield')['on'+this.id] = eventHandler;

                        //document['on'+this.id] = eventHandler;

                    }

             

                    function detectEvent(e) {

                        var evt = e || window.event;

                        writeData('<b>'+evt.type+'</b>:  keyCode=' + evt.keyCode+' : charCode=' + evt.charCode);

                        return document.defaultAction;

                    }

             

                    function empty() {

                        // nothing

                    }

             

                    var writeroot;

             

                    function writeData(msg) {

                        writeroot.innerHTML += msg + '<br />';

                    }

                </script>

             

                <style type="text/css">

                    body {

                        font-size: 12px;

                    }

                    #writeroot {

                        height: 300px;

                        overflow: auto;

                        border: 1px solid #2EB2DC;

                    }

                </style>

            </head>

            <body>

            <form id="testForm">

            <input type="checkbox" id="keydown" /> <label for="keydown">keydown</label><br />

            <input type="checkbox" id="keypress" /> <label for="keypress">keypress</label><br />

            <input type="checkbox" id="keyup" /> <label for="keyup">keyup</label><br />

            <input type="checkbox" id="default" /> <label for="default">Suppress default action</label><br />

            <input type="text" id="textfield" /><br />

            <button id="emptyWriteroot">Remove messages</button>

            </form>

            <a href="#" onclick="document.getElementById('docviewer-page').data=pdfURL;return false">Now load IFrame</a>

            <p id="writeroot"></p>

            <div id="container2" style="border:1px solid black;width:400px;height:200px">

                    <object

                        id='docviewer-page'

                        name='docviewer-page'

                        title='document page'

                        data='http://www.google.com'

                        align='left'

                        width='100%'

                        height='100%'

                        ></object>

            </div>

            </body>

            </html>