SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 89
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question perform a tab with js

    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.

    Thanks in Advance & Best Regards,
    Team 1504.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!

    Kind Regards,
    Team 1504.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I do not know how to specifically determine or listen to only tab
    Google search tells me: event.keyCode #9 is the tab key.

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hmm ah okay. so does the quriksmode example

    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!");

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    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:

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    <!Doctype HTML>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>div that preforms tab on press</title>
    		<style type="text/css">
    			#button{
    				height:55px;
    				width:100px;
    				background:#333;
    				color:#fff;
    			}
    			#button p:hover{
    				cursor:pointer;
    			}
    			#button p:active{
    				font-weight:700;
    			}
    			#button p{
    				margin:auto;
    				padding-top:18px;
    				color:#fff;
    				text-align:center;
    			}
    		</style>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    		<script type="text/javascript">
    			body.onkeydown = function (evt) {
        			var allowDefault = true;
        			var tabPressed = null;
        			evt = evt || event;
     
        			if (evt.keyCode === 9) {
           				tabPressed = true;
        			}
        			else{
        				tabPressed = false;
        			}
        			return tabPressed;
    			};
    
    			$(document).ready(function(){
    				$("#button").click(function(evt){
    					if(tabPressed == true){
    						alert("tab was pressed. Allow tabbing");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div id="button"><p>Tab</p></div>
    	</body>
    </html>
    Thank you for all your help.

    Regards,
    Team 1504

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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()?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    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:

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question

    Ah okay. Thank you

    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?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins
    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...

    Quote Originally Posted by paul_wilkins
    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.
    Quote Originally Posted by paul_wilkins
    Doesn't the tab key already move through a web page, as a part of its default behaviour?
    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...

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    :

    Code javascript:
    body.onkeydown = function (evt) {
        var allowDefault = true;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
        }
        return allowDefault;
    };
    Paul, is this how you use event handling in your production code? I have a slight variation, but similar.
    Chuck Norris is so tough,
    mosquitos ask for permission before they bite him

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by USPaperchaser View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The example there is a simplified example. What is the variation that you have in mind?

    Code JavaScript:
     
    var getOrder = document.getElementById("getOrder").OnClick
    {
    //Cowboys suck...
    }
     
    window.onload = getOrder
    Chuck Norris is so tough,
    mosquitos ask for permission before they bite him

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by USPaperchaser View Post
    [HIGHLIGHT=JavaScript]
    var getOrder = document.getElementById("getOrder").OnClick
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    Chuck Norris is so tough,
    mosquitos ask for permission before they bite him

  20. #20
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul, last question. You seen how I initialize event handlers. So can you give me a better way to do it, without conflicts. Example?
    Chuck Norris is so tough,
    mosquitos ask for permission before they bite him

  21. #21
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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 am talking about that one too...

    I have an idea... but ill start out by asking with a single part instead of the whole thing
    hmm let's start from square oneó not the beginning, but soon after (because programmers start counting at 0) :

    So the following listens for the tab key being pressed:
    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = true;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
        }
        return allowDefault;
    };

    So from this, how can I interrupt and stop what the tab-key normally does and instead alert("tab was prevented and replaced with this alert");

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by USPaperchaser View Post
    Paul, last question. You seen how I initialize event handlers. So can you give me a better way to do it, without conflicts. Example?
    Here's an example using standard event registration:

    Code javascript:
    function getOrder = function () {
        // do stuff here
    }
     
    document.getElementById('getOrder').onclick = getOrder;

    And here's an example using advanced event registration:


    Code javascript:
    function addEvent(el, evtType, func) {
        if (el.addEventListener) {
            el.addEventListener(evtType, func, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + evtType, func);
        } else {
            throw exception('Handler could not be attached');
        }
    }
     
    function getOrder = function () {
        // do stuff here
    }
     
    addEvent(document.getElementById("getOrder"), 'click', getOrder);

    The problem though with using advanced event registrations though is that in Internet Explorer, the this keyword always refer to the window object, and not to the element that triggered the event.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    So the following listens for the tab key being pressed:
    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = true;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
        }
        return allowDefault;
    };

    So from this, how can I interrupt and stop what the tab-key normally does and instead alert("tab was prevented and replaced with this alert");
    You can do that by setting allowDefault to false, which when it's returned from the function, will prevent the default behaviour of that event from happening.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Do you mean like this (changes in bold):
    body.onkeydown = function (evt) {
    var allowDefault = false;
    evt = evt || event;

    if (evt.keyCode === 9) {
    // tab was pressed
    }
    return allowDefault;
    };
    if(function(evt) == false){
    alert("tab was prevented and replaced with this alert");
    }


    or was i supposed to set allowDefault to false elsewhere...

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Do you mean like this
    ...
    or was i supposed to set allowDefault to false elsewhere...
    No, not like that. That will prevent the default of every key that is ever pressed.
    Instead, you only want that to occur when the tab key is pressed.

    Secondly, you may want to call a function when the tab key is pressed, so that you can more easily encapsulate what you want to achieve.

    Code javascript:
    ...
    if (evt.keyCode === 9) {
        allowDefault = handleTabKey();
    }
    ...

    Code javascript:
    function handleTabKey() {
        // potentially other stuff here, and then
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •