PgUp scrolling in FF

rosta

Hi,

I found following problem in FF 3.0.9 (it looks it is FF problem only). See few lines of code below:

Expand|Select|Wrap|Line Numbers

 <html>

   <head>

       <title>TEST</title>

       <script type="text/javascript">

           function act() {

               document.getElementById('p_id').innerHTML = '';

           }

       </script>

   </head>

   <body style="padding: 400px;">

       <p id="p_id"><input type="text" id="text" onkeypress="javascript: act();" /></p>

       <a href="javascript://" onclick="javascript: act();">remove by click</a>

   </body>

</html>

There is function act() that clear content of P element. To reproduce problem start with click on link "remove by click". After click you can try use PgUp and PgDown keys. You can see that
scrolling of page works without problem. Then refresh page and insert cursor in the text field and try type anything.
After first press, handler is executed and content of P is deleted (same function act()). !!Only difference is that scolling
through PgUp and PgDown keys does not work after this action!!. This problem is in FF only (tested IE6,IE7, Opera).

This is only model. I use similar function to change value in table cell and in keydown handler catch ENTER.
Then I save data through AJAX to database ..after response is cell replaced by new value (but scrolling doesnt work).

Is it firefox internal problem? Any idea how to make scrolling works in FF after keypress?

Thanks

Rosta

pronerd

Ok,

I think I see what is going on here. Once you select the text input field the field then absorbs all keyboard events. So if you change the trigger event from something like onkey to onmouseover the act() function is called before the text field is selected. And your keyboard events are not swallowed by the text field. Once a text field is selected though the keyboard events are swallowed by the text field, and you have to select something else on the page before events will work on the page again.

Expand|Select|Wrap|Line Numbers

 
<html>

   <head>

       <title>TEST</title>

       <script type="text/javascript">

           function act() {

               document.getElementById('p_id').style.display='none';

               document.getElementById('p_id').focus();

           }

       </script>

   </head>

   <body style="padding: 400px;">

          <form >

           <p id="p_id" ><input type="test" id="inputOne" onmouseover="javascript: act(); return false;" /></p>

        <input type="test" id="inputTwo" />

        <a id="link" href="javascript://" onclick="javascript: act();">remove by click</a>

       </form>

   </body>

</html>

rosta

Im able trigger event with onmouseover..this is ok, but then have to add
some onkey handler that check what I typed in field (in real situation there can be fields for example
with validators) and in case of ENTER I delete field (with innerHTML = '' (or html('')..Im using jQuery ))
and scrolling stop work. Even if I set focus back to page then scrolling is out. See
my original code with focus to newfield in the end of act function, I tried other
things like select text or click on checkbox to revive page but nothing works.

Expand|Select|Wrap|Line Numbers

 <html>

    <head>

        <title>TEST</title>

        <script type="text/javascript">

            function act() {

                document.getElementById('p_id').innerHTML = '';

                //document.getElementById('newfield2').focus();

                document.getElementById('newfield1').click();

                document.getElementById('newfield1').focus();

            }

        </script>

    </head>

    <body style="padding: 400px;">

        <input type="checkbox" id="newfield1" />

        <input type="text" id="newfield2" />

        <p id="p_id"><input type="text" id="text" onkeypress="javascript: act();" /></p>

        <a href="javascript://" onclick="javascript: act();">remove by click</a>

    </body>

</html>

pronerd

@rosta
And as I already explained that is going to happen each time the user selects an input field. None of the key events are going to trigger until the user has selected something else.

Why does it matter if the user can use the page up or down buttons any way. If they have selected a textfield that they are entering data, why would they want to move off of the page. They would not be able to see what they are entering.

rosta

For now, I want only that user is able to scroll with PgUp PgDown after field edit...Please look at my last post carefully where in last steps of act() function I write this:

Expand|Select|Wrap|Line Numbers

 document.getElementById('newfield1').click();

document.getElementById('newfield1').focus();

this select other element on page according your "None of the key events are going to trigger until the user has selected something else" ;) ...but scrolling still doesnt work...try to test (in FF and then in other browsers) ;)

Looking forward your answer

Rosta

PgUp scrolling in FF

Post your reply

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ