Perform a tab with js

I was wondering if it is possible and hoping if someone could help me preform a tab with js.

But, here’s the catch, i want it to act just like the tab-button on a keyboard does. Meaning not only does it indent (~4 spaces) in an input-field, text-area, or anywhere when one can type, but it also tabs to the next-element on a page that can be focused on.

I hope I am not being too confusing.

Its just like the tab-button that indents and also can move around a web-page for example.

I was trying to achieve something like this once a div, with the id #tabButton, I made is clicked.

Does anyone have any ideas on how to do this? I would really appreciate any help or ideas.

Thanks in Advance & Best Regards,
Team 1504.

You would set up an event listener for the onkeydown or onkeypress event. If the selected element is not a text field, you can allow that keypress to occur without interruption, so that it’s default behaviour of moving around the page occurs.

If the selected element is however a text field, you can then perform the alternative behaviour that you require. That could be to change the pressed key to a tab symbol instead, or to cancel the event and instead perform some custom behaviour of your choice instead.

well with some help from, mainly, Quircksmode and then some other pages I understood more about this and how to approach it, but I am still having same problem(s) with the following:

I learned how to listen to when any button is pressed, but 1.) I do not know how to specifically determine or listen to only tab

And why I want to do this, is because it seems like I would have to record this and then execute it once my div is clicked.

2.) But, I do not know how to record or store the result? And then execute it as the function once the div is clicked.

I apologise if I am asking too much and / or for being a noob :blush:

But I have been looking online and I can’t seem to put all these pieces together to get it all working, which the two issues above would greatly help with.

Thank you all very much in Advance and U would greatly appreciate any and all help!

Kind Regards,
Team 1504.

I do not know how to specifically determine or listen to only tab

Google search tells me: event.keyCode #9 is the tab key.

hmm ah okay. so does the quriksmode example :slight_smile:

so i am assuming then I would do some sort of if statement comparing it to keycode, right?

But then how do I get the result of what the browser or the js thinks the keycode is?

I mean, off the bat, would the syntax inside the function that is run on / inside onKeyPress be something like this:
In pseudo-code:
on document.ready()
if(event.keyCode == 9){
alert(“tab was pressed!”);
alert(“a key besides tab was pressed!”);

The base for the keydown event handling function goes like this:

body.onkeydown = function (evt) {
    var allowDefault = true;
    evt = evt || event;

    if (evt.keyCode === 9) {
        // tab was pressed
    return allowDefault;

The reason for the allowDefault variable is so that you can decide whether if you want the web browser to accept the key or not, depending on the needs of your particular situation.

Okay, in terms of using that code that you, paul_wilkins, were kind enough to provide, I tried using it to detect if as pressed and if so, alert that tab was pressed when my tab button is pressed.
Now that I am typing that, I think I am confusing myself even more.

Okay so the code you wrote gives if tab was pressed or not. Then what I was trying to do was interpret that and alert a result so that I could get #button to do the same once it was pressed.

But I think I seriously messed it up because, now, I am getting more confused each time I read my code. :blush:

So, now, the script can detect if tab was pressed. What I was trying to do was alert the user that tab was pressed and that tabbing will now occur once my button was pressed. Because eventually that what will happen.
But once I know if tab is pressed, how do I record what happens and replicate it once my button is pressed?

Here is the code, apologies if I really messed it up:

<!Doctype HTML>
<html lang="en">
		<meta charset="utf-8" />
		<title>div that preforms tab on press</title>
		<style type="text/css">
			#button p:hover{
			#button p:active{
			#button p{
		<script type="text/javascript" src=""></script>
		<script type="text/javascript">
			body.onkeydown = function (evt) {
    			var allowDefault = true;
    			var tabPressed = null;
    			evt = evt || event;
    			if (evt.keyCode === 9) {
       				tabPressed = true;
    				tabPressed = false;
    			return tabPressed;

					if(tabPressed == true){
						alert("tab was pressed. Allow tabbing");
		<div id="button"><p>Tab</p></div>

Thank you for all your help.

Team 1504

Okay first of all, why are you using jQuery there? That’s something that doesn’t seem to provide you in this situation any benefit at all.

I just usedit because I already have the lib linked for other parts of the page.
I guess one could use normal js, although i’ve never used normal js to execute a function on click of a target— isn’t it onMouseDown()?

In your particular case, you could move the script to the end of the body (just before the </body> tag) and use:

document.getElementById('button').onclick = function () {

If you want the tabpressed variable to be available to both functions though, it will need to be globally available, so you could use window.tabpressed for it instead.

Ah okay. Thank you :slight_smile:

The html above was just one of the many things I attempted. But, none of them worked.

Now that I can listen for tab being pressed with the code from post 6.

But how do I / how can one write a script that will execute what the tab-key does, indent in input-fields and move through a web-page, once the div #button is is clicked?

Doesn’t the tab key already move through a web page, as a part of its default behaviour?

What you will need to do is tot study up on how the tab key responds in a web page, so that you can come up with several scenarios of how its it currently behaves, and what you require it to do differently.

Only when you have clearly understood knowledge of what you actually want to achieve, which is something that user scenarios can help with a lot here, should you attempt to write it up as actual code.

Well, thats what I wanted help with…:lol:

Well, all i wanted to do is execute what the tab-button does normally (when its pressed). And when the div #button in clicked.
and I thought you said in the second post that I could use js to listen when the tab-button is pressed and then run what it does normally when #button is pressed.

Am I making sense or am I lost and confused? And have I confused you even more… :blush: :lol:

Ahh, I think that we’re getting confused about things. I’ve been talking about the tab key on your keyboard, the one on the left just above the caps lock key.

Paul, is this how you use event handling in your production code? I have a slight variation, but similar.

The example there is a simplified example. What is the variation that you have in mind?

var getOrder = document.getElementById("getOrder").OnClick
//Cowboys suck...

window.onload = getOrder

I’m surprised that that works due to the capitalization, since OnClick is not an event, but onclick is.

That window.onload is in danger of being clobbered by other scripts that may work with the same event, so instead of doing that the code is much more robust by moving it directly to the end of the body, so that you can directly work with page elements while the page is loading.

Your right on the capitalization, I was just doing a quick example without much thought.

Paul, last question. You seen how I initialize event handlers. So can you give me a better way to do it, without conflicts. Example?