PgUp scrolling in FF

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rosta
    New Member
    • Apr 2009
    • 3
    #1

    PgUp scrolling in FF

    Hi,

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

    Code:
    <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
    Tags: firefox, javascript, onkeypress, pgup, scrolling
    • pronerd
      Recognized Expert Contributor
      • Nov 2006
      • 392
      #2
      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.


      Code:
      <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>

        Comment

        • rosta
          New Member
          • Apr 2009
          • 3
          #3
          Im able trigger event with onmouseover..th is 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.

          Code:
          <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>

            Comment

            • pronerd
              Recognized Expert Contributor
              • Nov 2006
              • 392
              #4
              Originally posted by rosta
              in case of ENTER I delete field (with innerHTML = '' (or html('')..Im using jQuery ))
              and scrolling stop work.
              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.

                Comment

                • rosta
                  New Member
                  • Apr 2009
                  • 3
                  #5
                  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:
                  Code:
                  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
                  Last edited by Dormilich; Apr 30 '09, 05:51 AM. Reason: added [code] tags

                    Comment

                    Previous template Next
                    Working...