/    Sign up×
Community /Pin to ProfileBookmark

losing default submit button focus in IE

hi,

it looks like IE always randomly focuses on the different submit buttons on my pages.. is there a way of getting rid of that “feature”?

basically I don’t want it to focus on anything by default.. as in other browsers.

thanks

to post a comment
JavaScript

11 Comments(s)

Copy linkTweet thisAlerts:
@FangJan 08.2009 — The focus is on the window not the document, unless you set the focus.
Copy linkTweet thisAlerts:
@zdziebloauthorJan 08.2009 — The focus is on the window not the document, unless you set the focus.[/QUOTE]

hello mate,

I don't really understand what you're trying to say... what I mean is let's say we've got this on a page...

<input type="submit" value="1">

<input type="submit" value="2">

<input type="submit" value="3">

... then when you're accessing it with IE one of this buttons will have a thick outline that I don't like.
Copy linkTweet thisAlerts:
@FangJan 08.2009 — When the document is opened none of the elements have focus.

A focus can only be set by user interaction or a JavaScript statement.

Can you give a link and in which version of IE does this occur?
Copy linkTweet thisAlerts:
@zdziebloauthorJan 08.2009 — found the problem.. if <input type="submit"> isn't surrounded by <form></form> tags, IE focuses on the first found <input type="submit"> element... guess gonna have to use <button> instead.
Copy linkTweet thisAlerts:
@TheTeenScripterJan 08.2009 — If you add onfocus="this.blur()" to each button, you won't have that problem
Copy linkTweet thisAlerts:
@slaughtersJan 08.2009 — I think that focus is given to submit buttons by default in IE, even when wrapped in a form. I've had to use type=image and type=button to get around that issue in the past.
Copy linkTweet thisAlerts:
@toicontienJan 08.2009 — The submit button doesn't receive focus. Browsers highlight the submit button in a form that gets "clicked" automatically when you press ENTER in a text field for instance, when the form is submitted by a user action other than clicking the submit button. It's a visual way of telling the user what the form's default action is.

Consider that you have a RESET and SUBMIT button in your source code, in that order. Pressing ENTER on a text field in the form causes the browser to automatically "click" the RESET button -- which is why the browser highlights which submit button is used to submit the form. ? This is also why pressing ENTER on a form field does not submit the form unless there is a SUBMIT, RESET, or IMAGE button inside the form.
Copy linkTweet thisAlerts:
@TheTeenScripterJan 08.2009 — actually, if the TYPE of the button is submit, then it WILL be the default, no matter what other buttons are there
Copy linkTweet thisAlerts:
@toicontienJan 09.2009 — Ah. Right you are, TheTeenScripter. It's good to note, however, that if you have more than one SUBMIT or IMAGE type button on your form, it then uses the first SUBMIT or IMAGE button it encounters.
[code=html]<form action="#" method="get">
<input type="text" value="">
<input type="image" name="action" value="Cancel" src="btn_cancel.gif">
<input type="submit" name="action" value="Delete">
<input type="submit" name="action" value="Save">
</form>[/code]

In this example, the "default" button is the IMAGE button.
Copy linkTweet thisAlerts:
@puthethJun 08.2009 — I found this issue when designing the pages using tables. There is no issue when using <div> tags.
Copy linkTweet thisAlerts:
@toicontienJun 08.2009 — This "issue" (behavior, rather) happens regardless of whether you use tables or CSS for layout. The browser simply uses the first submit, reset or image button it encounters in the form source code as the default submit button for the form.
×

Success!

Help @zdzieblo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...