Hello,
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.
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.
Hmm…
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
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!
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()
onKeyDown
function(){
if(event.keyCode == 9){
alert(“tab was pressed!”);
else{
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.
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:
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.
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, 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…
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.
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.
