Can I ignore some website element when navigating

Question

As question really. I have an input box on my page that I would like to ignore when navigating using the keyboard tab key.

I'm using this input box as a simple bot honeytrap and positioning it off the page, so at the moment when using the tab key, it looks to the user as though nothing has focus when they tab to this element.

Answer 1

You can use tabindex attribute to define order in which the tab key should cycle through elements. If you set tabindex="-1" the element will be skipped.

More info is available here http://www.webcheatsheet.com/HTML/controll_tab_order.php for example.

UPDATE changed tabindex="0" to "-1" based on comments

Answer 2

I used workaround disabled flag on my input element, because no user input is wanted in my case :)

Example with 3 inputs:

.container {
  display: flex;
  flex-direction: column;
}
input {
  width: 200px;
  margin-bottom: 10px;
}

<div class="container">
  <input placeholder="Not disabled"/>
  <input placeholder="Disabled - skipped by tab" disabled/>
  <input placeholder="Not disabled"/> 
</div>

Hope it works well for somebody <3 - Chrome, Edge, Firefox and also "pseudo" browser IE tested.

Answer 3

You can set the tabindex="-1" on this element so it's ignored in the tad order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.

Answer 4

display: none it instead.