26

How can I remove focus from submit button? I don't know why it is there in the first plate, and it looks really ugly here is a screenshot :

alt text

And here is how it should look like, it regains its appearance after I click beside it and hover it.alt text

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
ant
  • 22,634
  • 36
  • 132
  • 182

5 Answers5

47

This worked :

var selectedInput = null;
$(document).ready(function() {
    $('input, textarea, select').focus(function() {
        this.blur();
    });
});
ant
  • 22,634
  • 36
  • 132
  • 182
  • 1
    Note that by blurring the button on any focus you won't be able to submit the form by pressing enter on the button, which is a standard behavior most people expect. If you are worried about the visual look why not try removing the outline as I noted and leave the focus alone? – Brian Moeskau Mar 13 '10 at 22:17
  • @bmoeskau it doesn't work with removing element and yes I want to disable enter for submitting as well. – ant Mar 13 '10 at 23:00
  • It shouldn't be an accepted answer. You should never remove a focus from any element (this breaks keyboard navigation for example). This can be easily removed using CSS, but you should provide some other form of feedback as well (for example, when you remove an outline, you change a background). https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/ – dczajkowski Mar 06 '21 at 00:41
6

Try this in your button's CSS, or that of the enclosing <a> (whatever has focus) if that's what you are using in the markup (reference):

outline:0 none;

Bear in mind that a distinct focus style is a valuable accessibility/usability feature, so you should provide some alternate focus hint that is more visually pleasing to you, rather than removing it completely.

Brian Moeskau
  • 20,103
  • 8
  • 71
  • 73
1

In your body or form... 

<form onready="document.getElementById('submit').blur();">
...
<input type="submit" id="submit" />
</form>
casraf
  • 21,085
  • 9
  • 56
  • 91
0

The first submit button in a form is always "in focus", hence, when you hit enter, your form gets submitted.

See responses to a similar post: Stopping IE from highlighting the first submit-button in a form

Community
  • 1
  • 1
naivists
  • 32,681
  • 5
  • 61
  • 85
  • @naivists on contrary it works fine in IE, firefox is the focusing it – ant Mar 13 '10 at 19:01
  • most likely, Mozilla is trying to implement HTML5 and this is what you see. Of course, you can create a simple javascript which runs on document load event and calls `blur()` on that particular submit button. However, this sounds awkward ;-) – naivists Mar 13 '10 at 19:18
  • as much as it sounds akward it doesn't work as well, I tried it already, on several ways.. – ant Mar 13 '10 at 19:27
  • @naivists This focus is an issue for me when dealing with "web accessibility" and keyboard users. The focus should be on the input, but the button. How to fix this? – esanz91 Aug 11 '15 at 21:09
0

You can code your button as:

<button onClick='this.form.submit()'>Button Text</button>

That removes the "submit" functionality to code and thus the focus problem.

cbmckay
  • 466
  • 7
  • 19