0

Alright, I really can't figure this out. When one of my pages is loaded, the search field is automatically focused. This is breaking the tab order of the page. There are skip links and other links that are in correct tab order before the search field, but for some reason the input field ALWAYS receives first focus. After you tab away, the tabbing order is correct, but then either skips the search field when re-tabbing through or starts tabbing at the input field. Below is a snippit of the the element: 

<input id="search-input" quicksearch="false" type="text" autocomplete="off" name="q" aria-label="Search" value="" placeholder="Search..." tabindex="1">

I manually added the tabindex="1" in there to test it, but still doesn't do what I'm looking for. It semi-fixes it by actually starting the tabbing at the top, but then doesn't fit in the tab order which is the issue. I've added tabindex="0", "-1", "2" but every single time, that input field is the very first thing focused. I have removed the autofocus from the input field with jQuery and can verify that it has removed it, but to no avail. I've checked all the other element's tab indexes and they're either "0" or "-1".

Outside of the input field being the first to focus, the tab order is accurate. I just want the tabbing to start at the top of the page AND work it's logical way down AND include the input field like it's supposed to do!

Is it that jQuery isn't quick enough to remove the autofocus before it's included in the hard HTML?

Manjuboyz
  • 6,978
  • 3
  • 21
  • 43
Brandon
  • 21
  • 1

1 Answers1

0

You can do blur() to unfocus the input control.

function focusInput() {
  document.getElementById('search-input').focus();
}
function blurInput() {
  document.getElementById('search-input').blur();
}
<input type="text" id="search-input" value="Sample">
<br><br>
<button type="button" onclick="focusInput()">Click to gain focus</button>
<button type="button" onclick="blurInput()">Click to lose focus</button>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43