Trying to set onfocus event handler

[willogee]

Hi folks

I have a form on a page that stretches beyond boundaries of a div, so the user has to scroll across to complete all form elements (not great user interface design I know, but that's just how it is on this one).

I am using a validation toolkit that, after alerting an input error returns focus to the offending form element for the user to correct. If the offending element is out of view, I would like to be able to scroll automatically as the element receives focus from the validation tool.

So I would like to be able to set an event handler that can distinguish between focus obtained by the user (keyboard or mouse) and focus obtained by the validation tool.

I'm pretty new at event handlers, so don't even know if this sort of thing is possible. Any pointers in the right direction would be much appreciated.

Many thanks, Will

(my first post here, so go easy on me!)

[mitya]

I can't see that the method by which the onFocus comes about is important. What you need is for the div to scroll, if required, to make the form field in question visible.

You can detect and set the scroll position of a document using document.body.scrollTop/Left so, though I haven't tried it, I imagine you could work that with the id of your div (document.getElementByid('mydiv').scrollLeft = ...etc.

1) sorry if that doesn't work
2) this of course needs you to tell it how far to scroll left/right for each form field - trial and error to ascertain that.

[CrazyMerlin]

here is a quick function I just wrote, that when used in conjunction with the focus method will do as you want.

what the code does is scroll into view the object who's name you pass to it.


function ScrollToLocation(objName){
var x=document.getElementById(objName).style.left;
x=x.substring(0, (x.indexOf('p')));
var y=document.getElementById(objName).style.top;
y=y.substring(0, (y.indexOf('p')));
window.scrollTo(x,y);
}


you must set the style properties of left and top for each object you need this to work for. Otherwise the object has no left and top properties.

when you call for the left and top properties you get them with 'px' attached, so the function strips the 'px' and scrolls the object into view

because you then have the object in control, you could make it obvious to the user which object it is but doing any number of style tricks on it.

hope this helps,

~~CM!