Prevent page scrolling down on form focus event?

Hi Guys,

I’m using a code snippet to have a cursor placed in a form field once a page loads, see the below posted code.

The form field in question is located below the fold.

The problem is that when the page loads it will scroll the page downwards to show the form field, I don’t want that happen. I only want the cursor to appear…not the whole page to scroll downwards when the page loads.

Any ideas or suggestions what I can do to prevent the page from scrolling downward when using this code?

It’s happening with similar codes as well that places a cursor inside the form field.

I only want the page to scroll downward when the user decides to scroll downward, not because of the cursor placement.

Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Test</title>
</head>
<style>
#spacer{
  height:1200px;
  width:1200px;
  border:1px solid #cd0000;
}
</style>
<body>
<div id="spacer"></div>
<div id="form">
</div>
  Type: <input id="focusme">
  <script type="text/javascript">
      window.onload = function () {
        // focus on the input field for easy access...
        var input = document.getElementById ('focusme');
        input.focus ();
        // ...but if someone wishes to go back in their history, let them!
        document.onkeydown = function (e) {
          if (!e) {
            var e = window.event;
          }
          if (e.keyCode === 8 && !input.value) {
            history.back();
          }
        };
      };
    </script>

</body>
</html>

When you give something the focus and it is not displayed in the window then the window will be updated so that it is visible. That is what giving something the focus means - to make it visible and set it as the current object displayed in the window.

Is there an alternative to have the form field display a cursor then?

Because I like how it improves the usability of my form. :slight_smile:

It doesn’t improve the usability of forms to set the focus. That was thought to be true until it was realised that it breaks the usability of the form rather than enhancing it.

If the form is visible in the browser and the person starts typing into it and the page finishes loading and sets the focus then they end up overtyping all the content they already entered because you reset the cursor back to the start of field one when they were half way through typing in field nine.

Fortunately in my case someone won’t start engaging with the form after the page has finished loading because the form is below the fold. It will only enhance the usability of the form. (And my page loads lightning fast :wink: )

Can it be prevented or done via a different technique?

You could find the position of the element, and compare that to the viewport size, and how far it’s scrolled. You would need to poll frequently, and keep rechecking until the first time the element calculates as being visible in the viewport. Set focus at that time(it’s visible to the user, so the browser won’t auto scroll at this time), and then stop polling.

You might consider using a javascript library, because there’s a bit of variation in how to get this type of data out of the browser.

That is still no guarantee that it will be below the fold and that no one has started entering into the form before the page finishes loading. I have heard of people who have one browser window open across more than a dozen monitors right down one wall of their hallway so that the browser is open to tens of thousands of pisels in width - so wide that most flexible web layouts would only fill the top part of the browser window with the bottom half of the browser empty and nothing below the fold. I have also heard of people doing somewhat similar vertically so that their browser window spans three or four browsers vertically with a height of 6000+ pixels so that only extremely long web pages reach the bottom of the browser. Also even where it is below the fold before they start to scroll they may load the page already scrolled down to the form rather than loading the page at the top and still have several fields filled out by the time your lightning fast page has loaded. (Since forms need ids on input fields so as to link their associated label to the field for accessibility purposes and that same id serves as an anchor point within the page that can be specified to be at the top of the browser when the browser is opened.)

Okay, with all due respect. I don’t want to create a discussion on usability here.

Thanks for trying to help me out, I appreciate the time you’ve taken to add your say.

Thanks for the suggestion, sounds like a solution with a potential problem though. Because you’re using a fixed value for the users resolution.

I have a good understanding of my users screen resolutions, but by using a fixed value it won’t work due to different screen resolutions.

I might be misunderstanding you though. :slight_smile:

You make no assumption on resolution or viewport size. Javascript provides these values.

You can find the pixel position of an element relative to the upper left corner.
You can find the viewport dimensions.
You can find how much the page is scrolled.

This is enough to do what is needed.

I see.

Unfortunately I’m not able to create code like that.