SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 89
  1. #26
    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
    No, not like that. That will prevent the default of every key that is ever pressed.
    I thought so, but I wanted to try that to confirm it with you.

    Quote Originally Posted by paul_wilkins
    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.
    Also why have a function handleTabKey() return something. Isn't it useless or less useful right now, but wouldn't it help later in executing other things after interrupting the tab's default function ?


    But for now, without other things happening, can't we set allowDefault to false without a function like so:
    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = true;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            allowDefault = false
        }
        return allowDefault;
     
        if(allowDefault === false){
            alert("tab was prevented and replaced with this alert");
        }  
    };

    or this... (it seems like they do the same thing— the latter with less code)

    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = true;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            alert("tab was prevented and replaced with this alert");
        }
        return allowDefault;
    };

    or even this...
    (or without using allowDefault at all, for now, and therefore not intialising or returning it. And executing what replaces the tab's default behaviour straight when the tab key is detected in the if statement*)
    Code JavaScript:
    body.onkeydown = function (evt) {
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            alert("tab was prevented and replaced with this alert");
        }
    };
    *I can see how this would be messy code, is that why you suggested to encapsulate it into a function?

    2 more questions:
    1.) So do all of the above do the same thing?
    2.) Is that same thing interrupting the tab button's function once pressed and alerting the message instead?

  2. #27
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Also why have a function handleTabKey() return something.
    Because that then passes control of whether the default behaviour continues to occur or not to the function, which is where such decisions should be based.

    Quote Originally Posted by team1504 View Post
    but wouldn't it help later in executing other things after interrupting the tab's default function ?
    Yes it would.

    Quote Originally Posted by team1504 View Post
    But for now, without other things happening, can't we set allowDefault to false without a function like so:
    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = true;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            allowDefault = false
        }
        return allowDefault;
     
        if(allowDefault === false){
            alert("tab was prevented and replaced with this alert");
        }  
    };
    Doing it that way means that the onkeydown function is doing more than it should be doing. Also, the alert about the tab could occur in a better location than outside of the section that relates to tabs.

    Quote Originally Posted by team1504 View Post
    or this... (it seems like they do the same thing— the latter with less code)

    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = true;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            alert("tab was prevented and replaced with this alert");
        }
        return allowDefault;
    };
    Yes, that's better. Now the code that relates to the tab key being pressed is within the section of code that determines whether it was the tab key that was pressed.

    Quote Originally Posted by team1504 View Post
    or even this...
    (or without using allowDefault at all, for now, and therefore not intialising or returning it. And executing what replaces the tab's default behaviour straight when the tab key is detected in the if statement*)
    Code JavaScript:
    body.onkeydown = function (evt) {
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            alert("tab was prevented and replaced with this alert");
        }
    };
    No, you don't want to remove that allowDefault part.
    The web browser will always perform its default behavior unless you explicitly return a value of false from the function.

    Quote Originally Posted by team1504 View Post
    *I can see how this would be messy code, is that why you suggested to encapsulate it into a function?
    That's right.

    Quote Originally Posted by team1504 View Post
    2 more questions:
    1.) So do all of the above do the same thing?


    They're similar, and have been commented on above.

    Quote Originally Posted by team1504 View Post
    2.) Is that same thing interrupting the tab button's function once pressed and alerting the message instead?
    I don't understand what you're asking there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #28
    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
    Quote Originally Posted by team1504
    *I can see how this would be messy code, is that why you suggested to encapsulate it into a function?
    That's right.
    ah okay. i'll keep that in mind for later on.


    Quote Originally Posted by paul_wilkins
    No, you don't want to remove that allowDefault part.
    The web browser will always perform its default behavior unless you explicitly return a value of false from the function.
    ah okay. I understand
    Then for now, we'll go with this:
    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = true;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            alert("tab was prevented and replaced with this alert");
        }
        return allowDefault;
    };

    Quote Originally Posted by paul_wilkins
    I don't understand what you're asking there.
    Its okay. I worded that weird, but you answered it still before.


    okay this is completely different, but related...
    Suppose I wanted to execute tab when enter is pressed. I know enter's keyCode is 13, but how would the js for that work...

  4. #29
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Suppose I wanted to execute tab when enter is pressed. I know enter's keyCode is 13, but how would the js for that work...
    That would be much more difficult. It's not possible to just replace one keystroke with a different one.

    Instead, you would need to prevent the web browser's default action, find the active field on the page (which might not have an active one) and then loop through the fields looking for the one that's active, get the next field area and set that next focus to the next field.

    Finally, the expected behavior that the user expects from the web browser will be different from what they have experienced on thousands of other sites that the user uses (where Enter submits active form), so you are likely to have usability problems to deal with there too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #30
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah okay. That sounds horribly hard— let's scratch that.

    How about this:
    Inside the if statement, that checks if the keyCode is 9, is where we can add things to the default functionality of what happens once the tab-button is pressed. But if we want to rewrite the behaviour, we set the allowDefault to false and then we write the new behaviour.
    1.) so in this if statement and / or the entire function (when allowDefault is true) is where the default action of the tab button occurs, right?
    2.) Is there a way I can set the default behaviour, without my changes, to a variable?
    Or store it somehow?
    something like soring the result of this in complete pseudo-code whatWasGoingToHappenDefaultly().or tabKey.whatWasGoinfToHappenByDefault()

    Does that make sense? Do you understand? Or have some ideas?

  6. #31
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    1.) so in this if statement and / or the entire function (when allowDefault is true) is where the default action of the tab button occurs, right?
    Nope, inside that function is what happens when the tab is pressed down on the keyboard. After that function finishes, the web browser carries on with its own default (non-scripted) behaviour for when the key is pressed, unless of course false has been returned from the function to suppress that default behaviour.

    Quote Originally Posted by team1504 View Post
    2.) Is there a way I can set the default behaviour, without my changes, to a variable?
    Or store it somehow?
    something like soring the result of this in complete pseudo-code whatWasGoingToHappenDefaultly().or tabKey.whatWasGoinfToHappenByDefault()
    Nope, it's not possible to do that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #32
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pardon my french: ****! I was hoping it could be bloody done that way...
    Guess GlaDOS was wrong... " The best solution to a problem is usually the easiest one ".
    or at least not the easiest sounding one...

    hmmm time for some out-of-the-box-thinking

    what if, inside the function called once #button is clicked, allowDefault is set to true:
    Code JavaScript:
    document.getElementById('button').onclick = function () {
        body.onkeydown = function (evt) {
            var allowDefault = true;
            evt = evt || event;
     
            if (evt.keyCode === 9) {
            // tab was pressed
            }
            return allowDefault;
        };
    };
    Will that preform the tab's default action once #button is clicked. Or will it just allow the tab's default action everytime tab is pressed after the button is clicked?


    Or what about this... Won't it execute the tab's default action once the button is clicked?
    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = false;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            document.getElementById('button').onclick = function () {
                allowDefault = true
            };
     
        }
        return allowDefault;
    };


    or this...
    Code JavaScript:
    document.getElementById('button').onclick = function () {
        allowDefault = true
    };
    body.onkeydown = function (evt) {
        var allowDefault = false;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
        }
        return allowDefault;
    };


    or even this...
    Code JavaScript:
    var buttonPressed = false;
    document.getElementById('button').onclick = function () {
        buttonPressed = true;
        return buttonPressed;
    };
    body.onkeydown = function (evt) {
        var allowDefault = false;
        evt = evt || event;
     
        if (evt.keyCode === 9) || (buttonPressed === true){
            // tab was pressed
            allowDefault = true
        }
        return allowDefault;
    };

  8. #33
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    [QUOTE=team1504;4994710]hmmm time for some out-of-the-box-thinking

    what if, inside the function called once #button is clicked, allowDefault is set to true:
    Code JavaScript:
    document.getElementById('button').onclick = function () {
        body.onkeydown = function (evt) {
            var allowDefault = true;
            evt = evt || event;
     
            if (evt.keyCode === 9) {
            // tab was pressed
            }
            return allowDefault;
        };
    };
    Will that preform the tab's default action once #button is clicked. Or will it just allow the tab's default action everytime tab is pressed after the button is clicked?

    That will just allow the button's default action to occur when that button is clicked, and the keyCode part becomes of no use then because no key is pressed during an onclick event. Even if the Enter key is used to trigger the button, one event will fire for the enter key, which the onkeydown event would capture, followed by onclick event on the button.

    Quote Originally Posted by team1504 View Post
    Or what about this... Won't it execute the tab's default action once the button is clicked?
    Code JavaScript:
    body.onkeydown = function (evt) {
        var allowDefault = false;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
            document.getElementById('button').onclick = function () {
                allowDefault = true
            };
     
        }
        return allowDefault;
    };
    Nope, for when the internal onclick event fires, the function won't be in the same scope as the rest of the code there.

    Quote Originally Posted by team1504 View Post
    or this...
    Code JavaScript:
    document.getElementById('button').onclick = function () {
        allowDefault = true
    };
    body.onkeydown = function (evt) {
        var allowDefault = false;
        evt = evt || event;
     
        if (evt.keyCode === 9) {
            // tab was pressed
        }
        return allowDefault;
    };
    Different scopes again, one being a global scope and the other being local to the function.

    Quote Originally Posted by team1504 View Post
    or even this...
    Code JavaScript:
    var buttonPressed = false;
    document.getElementById('button').onclick = function () {
        buttonPressed = true;
        return buttonPressed;
    };
    body.onkeydown = function (evt) {
        var allowDefault = false;
        evt = evt || event;
     
        if (evt.keyCode === 9) || (buttonPressed === true){
            // tab was pressed
            allowDefault = true
        }
        return allowDefault;
    };
    Just what are you trying to achieve?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #34
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Honestly, I am just trying to create a button that does the following once clicked:
    Moves to the next input, textarea, or select in a form.

    By moves, I mean focuses on.

    Is there a way one can apply focus to an id?

  10. #35
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Honestly, I am just trying to create a button that does the following once clicked:
    Moves to the next input, textarea, or select in a form.

    By moves, I mean focuses on.
    It sounds like a simple thing, but once you click on the button the web browser doesn't know where the focus was before that.
    So, you need to do what was mentioned in post #29

    Quote Originally Posted by team1504 View Post
    Is there a way one can apply focus to an id?
    Sure thing, with the elem.focus() method.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #36
    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 View Post
    It sounds like a simple thing, but once you click on the button the web browser doesn't know where the focus was before that. So, you need to do what was mentioned in post #29
    oh. okay...

    Quote Originally Posted by paul_wilkins View Post
    Sure thing, with the elem.focus() method.
    What if I gave each of the different elements in the form an id of inputX. X being the number of input that it is starting at 0 and increasing as one goes down the form.

    Could you help me write a script that on click of #button focuses on the element with the id #inputX. and X is +1 of what ever X was before?
    so maybe something like this (mostly in pseudo-code):

    var X = 0;
    #button.click( function(){
    X = intFormOf(lastCharacterInX) + 1
    var idName="input"+stringFormOf(X)
    idName.focus()
    });

  12. #37
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    What if I gave each of the different elements in the form an id of inputX. X being the number of input that it is starting at 0 and increasing as one goes down the form.

    Could you help me write a script that on click of #button focuses on the element with the id #inputX. and X is +1 of what ever X was before?
    It can be done without adding vast numbers of unique identifiers to your HTML, by using the onblur event to keep track of what that previous element was. That way you can just loop through the elements within a form, and when you come across one that matches you know that the next one is what should then receive the focus.

    Why though are you using an on-screen button when the behaviour you want works automatically within the web browser by pressing the tab key on the keyboard?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #38
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well its part of a project that I am working on and I don't have control over changing this form.
    But it less than normal, but not too small viewports (usually older machines) the form is partially hidden. My task was to make it work in small(er) viewports without a scroll-bar.
    So I thought tabbing through the form. The boss-man liked that idea and told me to go through with it. So I told him that its already there— pretty much all keyboards do it.

    But, he insisted that everyone has to contribute on all parts of the project and told me to make a button on the side of the form that tabs.

    So I am kind of stuck with getting this to work— if i want to get paid that it

    Its kind of like auto-tab in forms, but we don't know how much the user is going to type. As there is no limit.
    Well, there is an assumed limit, but nothing strict like on Twitter.

    Does my reasoning shed some light on my situation now (and why I have been so persistent in finishing this) ?
    And would / could you help me with the blur and focus script?

  14. #39
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    But, he insisted that everyone has to contribute on all parts of the project and told me to make a button on the side of the form that tabs.

    So I am kind of stuck with getting this to work— if i want to get paid that it
    You need to tell your boss that web browsers don't work in that way. It can be possible to partially simulate things, but it will be a costly exercise for your boss that won't result in much of a beneficial result.

    It's our job as web developers to help our boss achieve what he wants, and also to advise and educate him when he tries to do what is not reasonable or practical, or cost-effective.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #40
    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 View Post
    You need to tell your boss that web browsers don't work in that way. It can be possible to partially simulate things, but it will be a costly exercise for your boss that won't result in much of a beneficial result.

    It's our job as web developers to help our boss achieve what he wants, and also to advise and educate him when he tries to do what is not reasonable or practical, or cost-effective.
    okay. will do tomorrow morning.

    but, could you still help me start a script that blurs the current field and focus on the next one?
    Like you described here:
    It can be done without adding vast numbers of unique identifiers to your HTML, by using the onblur event to keep track of what that previous element was. That way you can just loop through the elements within a form, and when you come across one that matches you know that the next one is what should then receive the focus.
    Its just that I want to cover my bases and at least have something because the project deadline is Sunday, but this form and my part in it was a small part of the rest I have to develop.

  16. #41
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Its just that I want to cover my bases and at least have something because the project deadline is Sunday, but this form and my part in it was a small part of the rest I have to develop.
    Let's get started then. The steps are:

    1. set a blur event on each of the elements you wish to track
    2. assign a common function called blurHandler to that blur event
    3. the blurHandler function stores a reference to the element in a form property called previousFocus
    4. next is to assign a function to the click event to the tab button
    5. in the tab click function do the following things:
      • loop through each element in the form
      • check if the element matches the one from the stored previousFocus. If so, set a flag called focusNext and continue on to the next element
      • check if that focusNext flag has been set, and if so set the focus to that element, then end the loop
      • deal with situations that the loop won't catch, such as a next element not being found, or no previousFocus being set


    That should result in something close to a working prototype, but other things might need to be done too in order to account for different situations that crop up.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

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

    Unhappy

    Paul,
    I'm sorry if I am asking of too much, but I am a huge JS noob. Thats why I posted in the forums.
    Apologies if I sounded rude, I wans't meaning to be. But in my previous experiences, fellow SPF members have tought me to always try something myself and do as much as I can do and when I absolutely need help, then ask for it.

    So, i tried and all I could come up with is this:
    Code JavaScript:
    var previousFocus = null;
    $(".formElements").blur();
    blurHandler = function(){
    	previousFocus = $this
    }
    document.getElementById('button').onclick = function () {
    /*
     I have no clue how loop through form...
    or what a flag is. Or how to assign it. Or check it... :-(
    */
    };

    I know its not much, but its all I knew how to do. Again, I know we've both spend quite a bit of time on this topic, especially recently, and I want it to be done , so I can move on to the more fun things. So, I hope you don't mind me asking if you could help me fill the rest.

    Thanks in Advance,
    Team 1504

  18. #43
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    I know its not much, but its all I knew how to do. Again, I know we've both spend quite a bit of time on this topic, especially recently, and I want it to be done , so I can move on to the more fun things. So, I hope you don't mind me asking if you could help me fill the rest.
    It would not be appropriate for me to entirely create the scripting code, for which you would receive payment for from your boss.

    However, if you have the time we can go through it piece by piece.
    Last edited by paul_wilkins; Nov 16, 2011 at 19:21.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #44
    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 View Post
    It would not be appropriate for me to entirely create the scripting code, for which you would receive payment for from your boss.

    However, if you have the time we can go through it piece by piece.
    Oh, yes of course. Then it would be only fair for you to get paid too
    And, if so, I would asked with your help in writing it and further developing it.

    However, thank you for still being willing to and wanting to help me

    I guess the first piece then is what did I do wrong in the code I posted in post #42? (ignoring the looping and flagging for now)

  20. #45
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    I guess the first piece then is what did I do wrong in the code I posted in post #42? (ignoring the looping and flagging for now)
    I see that you're using jQuery in your sample code, so we'll use that to help with some of the heavy lifting.

    The first thing is that the previousFocus variable should not be a variable, but instead a property on the form itself. That ensures that the information is kept in a location that is easily accessible to other code that works with the form, while also being as local as practical to the form itself. Global variables are considered to be bad form, so the most global that we can achieve while still remaining as local as practical, is the form itself.

    If the form has no identifier, it needs one. You should make the identifier as relevant to the form as possible so if it were a form for filling in user details, you could give it an id of "userDetails". Until that sort of info is known, I'll go with "sampleForm".

    Code javascript:
    $('#sampleForm').prop('previousFocus', false);

    Then in the blur handler, you can set that previousFocus property to be the element that triggered the blur event. But we're getting ahead of ourselves here. How do we use jQuery to easily do things with form elements in the first place? You can use the ':input' selector, but we don't want the tab button (which I'll currently assume has an id of "tab") to also be included in that, so we can tell the selector to exclude that.

    Because this is jQuery now, we can provide the function directly to the blur event itself:

    Code javascript:
    $('#sampleForm :input:not(#tab)').blur(function () {
        ...
    });

    It's inside that event where we'll set the previousFocus property of the form.
    With event functions within jQuery, the this keyword can be used to refer to the element that triggered the event, and each form element contains a natural reference to the form itself, so all we should need to do within that function is:

    Code javascript:
    $(this.form).prop('previousFocus', this);

    Which will assign the element (via the this keyword) to the previousFocus property of the form.
    That's done so that later on with the tab button, the click event for it can refer to that previousFocus property to find out the most recent form element that previously had the focus.

    Now there's only (and it's a big only) the tab click event to deal with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #46
    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
    I see that you're using jQuery in your sample code
    Apologies, it is just something I am more familiar with and know so I naturally started typing in said syntax?— if that makes sense.

    Quote Originally Posted by paul_wilkins
    The first thing is that the previousFocus variable should not be a variable, but instead a property on the form itself. That ensures that the information is kept in a location that is easily accessible to other code that works with the form, while also being as local as practical to the form itself. Global variables are considered to be bad form, so the most global that we can achieve while still remaining as local as practical, is the form itself.
    ah okay. Yeah global variables are / were a bad habit of mine. But that makes sense

    Quote Originally Posted by paul_wilkins
    If the form has no identifier, it needs one. You should make the identifier as relevant to the form as possible so if it were a form for filling in user details, you could give it an id of "userDetails". Until that sort of info is known, I'll go with "sampleForm".
    I didn't give it an id, so i guess we can keep it at #sampleForm and ill tell them to give it that id or replace it with an id they choose.

    Quote Originally Posted by paul_wilkins
    How do we use jQuery to easily do things with form elements in the first place? You can use the ':input' selector, but we don't want the tab button (which I'll currently assume has an id of "tab") to also be included in that, so we can tell the selector to exclude that.
    ah, okay. And yes it has an id of #tab.

    Okay, so now we have this:
    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function () {
            $(this.form).prop('previousFocus', this);
        }
    });


    Quote Originally Posted by paul_wilkins
    Now there's only (and it's a big only) the tab click event to deal with.
    unfortunately, yes...

    well, isn't the first, and really simple, piece is writing the jQuery for when the button is clicked:
    Code JavaScript:
    $("#tab").click(function(){
        ...
    });

    And, now, the second or next piece:
    looping, right?... I know nothing about looping in js or jQuery

    But, I really appreciate your explanations— I learned a lot or at least something

  22. #47
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    And, now, the second or next piece:
    looping, right?... I know nothing about looping in js or jQuery
    Before we get on with the looping, the loop will need to make use of the information from previousFocus, so the first step for you in there would be to have the function display information about what is in the previousFocus, perhaps the nodeName of the element, or even the field name itself.

    Once you have worked out how to gain access to that information, we can work on looping through things from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #48
    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
    so the first step for you in there would be to have the function display information about what is in the previousFocus, perhaps the nodeName of the element, or even the field name itself.
    hmm display as in print / show the user or store it for us to use later?

    Well, this is what I could come up with after researching some:

    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function () {
            $(this.form).prop('previousFocus', this);
     
            var $possibleItemWithPropPreviousFocus = $('input[property=previousFocus]')
     
            /*But what do I do about the <select> and <textarea>'s that could and will have said property at some point. Can I do:
           var itemWithPropPreviousFocus = $('input[property=previousFocus]') || $('select[property=previousFocus]') || $('textarea[previousFocus]');*/
     
            var $actualItemWithPropPreviousFocus = $('#sampleForm').find($itemWithPropPreviousFocus);
     
            /* But then how to get name of it? alert($($actualItemWithPropPreviousFocus).get());
                That alerts it, but i couldn't find anything that returns the name-attribute of an element. */
     
        }
    });

  24. #49
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    But what do I do about the <select> and <textarea>'s that could and will have said property at some point.
    jQuery's :input selector picks up more than just input elements, it gets all form controls including input, textarea, select and button elements.

    Quote Originally Posted by team1504 View Post
    /* Can I do:
    var itemWithPropPreviousFocus = $('input[property=previousFocus]') || $('select[property=previousFocus]') || $('textarea[previousFocus]');*/
    var $actualItemWithPropPreviousFocus = $('#sampleForm').find($itemWithPropPreviousFocus);
    Within the tab click function, it's better to start from what you already have.
    If you use #sampleForm you are then restricting that code to working only within that one unique identifier.
    Instead, you can use the tab button itself to get to the form. All form controls contain a property called form, which references the form that the control is in, so you can gain a reference to the form from that form property.

    Code javascript:
    $("#tab").click(function(){
        var form = this.form;
        ...
    });

    It also makes the code more flexible, because if the form identifier ever changes, you won't have to come back to this piece of code to change it as well.

    Once you have the form, you can then retrieve that previousFocus property.
    If the initial reference is a jQuery object, you can use the .prop() method such as $(form).prop('previousFocus')
    If the reference is not a jQuery object, you can use a normal property refernce instead, with form.previousFocus
    Both will result in accessing the same property value from the form.

    Code javascript:
    $("#tab").click(function(){
        var form = this.form,
            previousFocus = form.previousFocus;
        ...
    });

    Quote Originally Posted by team1504 View Post
    But then how to get name of it? alert($($actualItemWithPropPreviousFocus).get());
    That alerts it, but i couldn't find anything that returns the name-attribute of an element.
    The previousFocus variable will now contain a reference to an input, or text area, or other type of form control.
    You can get the name of that form control just by getting the name property from that element, with previousFocus.name
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #50
    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
    jQuery's :input selector picks up more than just input elements, it gets all form controls including input, textarea, select and button elements.
    sweet!


    Quote Originally Posted by paul_wilkins
    Instead, you can use the tab button itself to get to the form. All form controls contain a property called form, which references the form that the control is in, so you can gain a reference to the form from that form property.
    wow, that is really nice and useful— Glad I know that now


    Quote Originally Posted by paul_wilkins
    If you use #sampleForm you are then restricting that code to working only within that one unique identifier...It also makes the code more flexible, because if the form identifier ever changes, you won't have to come back to this piece of code to change it as well.
    okay. Thank you, I'm sure my colleagues will appreciate that if they change the identifier. And i will as it makes it easier to use in other instances.


    Quote Originally Posted by paul_wilkins
    Once you have the form, you can then retrieve that previousFocus property.
    If the initial reference is a jQuery object, you can use the .prop() method such as $(form).prop('previousFocus')
    wait, doesn't that set the property of previousFocus to form? And not get / retrieve it?


    Quote Originally Posted by paul_wilkins
    If the reference is not a jQuery object, you can use a normal property refernce instead, with form.previousFocus
    okay. that makes sense. var form = this.form set the variable form to the form that the #tab button is a part of.
    And then form.previousFocus returns the element with said property within the variable form, which is the form, right?


    Quote Originally Posted by paul_wilkins
    You can get the name of that form control just by getting the name property from that element, with previousFocus.name
    wow, thats simple and logical! I spend a long time looking into a getName() function ...



    okay, so now we have:
    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function () {
            $(this.form).prop('previousFocus', this);
        }
        $('#tab').click(function(){
            var form = this.form;
            previousFocus = form.previousFocus;
        }
    });

    or is it inside the blur function?
    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function () {
            $(this.form).prop('previousFocus', this);
            $('#tab').click(function(){
                var form = this.form;
                previousFocus = form.previousFocus;
            }
        }
    });

    Do one of those look right?

    Also, so now have we finished with the piece regarding the name / nodeName of the element that currently has the prop previousFocus; and, then would we move on to the next piece— i assume the looping.
    Which, btw, I am so scared of. Thinking about what it does / is supposed to do makes me scared


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
  •