forms & focus

Globally setting and keeping focus on a submit button

[Alternative Future]

Hi all,

Is there a way to globally set and keep the focus on a submit button whilst filling out a form? We have a form that seems to default to the first button on the page, and we would rather it focused on the actual ‘Search’ (submit button) which is further down the page.
An alternative would be to remove focus from the buttons altogether, and rather than edit each button or element, we would prefer to have a global way of doing this.

Many thanks in advance,

-George

[Alternative Future]

Bump ;-)

[Bernard Marx]

I don't think you want to actually keep the focus set on the button, else no one will be able to write into the boxes. I know what you mean though. Simple solutions could be similar to:

<form onkeypress="keyPressed(this,event)">
...
function keyPressed(form,event)
{
 event = event¦¦window.event
 var key = event.which¦¦event.keyCode
 if(key==13)
 form.submit() // or whatever
}

This works for IE & NS. Only submitting when focus is somewhere in the form. It could be changed to always submit.
Have a read of this: [ppeph.gla.ac.uk ]

[Alternative Future]

Hi Bernard Marx,

Firstly thanks for taking the time out to reply.

This is the weird thing, even though the user/client makes their way through the form filling out each of the input fields the focus seems to remain on a submit button at the same time :( I don't know if this issue is directly related to JSP/Tiles or not, but like you say the focus should be on the input element that the user is dealing with.

The application only needs to work in IE therefore we are only testing in IE.

-George

[RonPK]

IE highlights the submit button whenever the user does something in the form. It doesn't actually set focus on the submit button, it just changes some propietary button border property. Is that what you mean?

[Alternative Future]

Hi RonPK,

Yeah that sounds like where the problem is...

Is there a workaround/hack or something that can be done to prevent this look to the App?

Many thanks,

-George

[Alternative Future]

I found another reference to this issue here [webmasterworld.com] see message #6 where pageoneresults <added>text</added> this was dated 2003 and I was wondering if anyone had ever came across a fix for this yet? The fix would only have to work in IE6+

-George

[RonPK]

Quick and dirty workaround with CSS:

border-width: 0

It leaves you with a cropped button...

[Alternative Future]

>>border-width: 0

The problem here is that we have the buttons styled with a border :(
Looks like we shall just have to accept and deal with it!

Thanks anywayz,

-George

[Bernard Marx]

I suppose you could use a normal button, with "Submit" on it.
(possible complications)

[Alternative Future]

>>I suppose you could use a normal button, with "Submit" on it.

Not that I see an issue with this, but the project leader refuses to have more JavaScript contained within the JSP's, we would have to attach an event handler to each of the normal buttons calling on the form submittal process.

It's good to hear everyone’s thoughts on this as I can raise them tomorrow at work with options available to use.

-George

[RonPK]

From a usability point of view I'd say don't mess with the submit button. The highlighting is a way of saying "dude, if you want to submit what you just entered: press me, and not the other grey thingies". Regular IE users may (unknowingly) expect the button to behave in that way, so your app might even confuse them... But that also is the downside of using image buttons.