Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    converting "ENTER" keypress to "TAB"

    helllllo people. i found a JS script that prevents people from hitting the enter key when filling out form fields, but allows it in a textarea field. neat.

    currently the script nullifies the keypress, i was wondering if someone could show me how modify the script to do two things

    a) instead of nullfiying the ENTER keypress, i'd like it if it would convert it into a TAB keypress, so that it would tab the user down to the next field to be filled out (i set all my tabIndex's)

    b) i'd also like the UP arrow to be converted into the SHIFT+TAB keypress (to move up through the fields, and the DOWN arrow to be converted into the TAB keypress to move the user down through the fields.
    - regarding the UP & DOWN functions, i'd like to be able to comment them out if need be and still be able to use the ENTER --> TAB function... so if the addition can be written in a manner condusive to that, i'd be very appreciative.

    anywhoo, here be the code
    Code:
    <script language="javascript" type="text/javascript">
    function checkCR(evt) {
    var evt = (evt) ? evt : ((event) ? event : null);
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
    }
    document.onkeypress = checkCR;
    </script>
    thanks in advance
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hehe upon reconsideration i think i'm about to make my/your life somewhat more complicated.

    i realised that this script is active on the entire page... so any enter press or up and down press anywhere with the browser window open would tab the user... generally annoying everyone.

    is there a way to only make the script active in the form fields? i dont mind if i have to give them all a class name or something... i just want to script to only activate when the user is in the fields so to not cause generalized mayhem and confuse my users.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Don't try to change browser's behavior. It will annoy and confuse users especially those who are not computer-savvy. They might thought it's a normal behavior and when they go to other site, they will also expect that behavior.

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    well thats it though, i dont want them to have that, hence:

    i realised that this script is active on the entire page... so any enter press or up and down press anywhere with the browser window open would tab the user... generally annoying everyone.

    is there a way to only make the script active in the form fields? i dont mind if i have to give them all a class name or something... i just want to script to only activate when the user is in the fields so to not cause generalized mayhem and confuse my users.
    i only want it to be functional in the form fields... and not in the general browser usage.

    can it be done?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by canadianjameson
    i only want it to be functional in the form fields... and not in the general browser usage.

    can it be done?
    Yes I know that, but will your users know it?

    It's possible but that's not the issue here.
    But I'm not here to tell you not to do it, I just want you to realize the consequence of that to new internet users.

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hmmm, i see your point. oooh-kay, here's what we're gonna do... i'll drop the mouse arrow functionality just because, yes, that would confuse people... but i'd still like to turn the nullified ENTER keypress into a TAB.... because that is found in some currently existing programs such as Excel, and wont be foreign to as many users.

    so how do i do that?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Note that the script you posted finds the form element. Now also remember that the form elements are in an array, so iterate your array until you find the current element by comparing the array entries to the found form element. Since the array of form elements is arranged according to the order they are declared you can add one to the number of the array, reset it to zero if it exceeds the bounds and then set the focus to that element.

    Did that make sense to you, or do I need to explain more completely?
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i kind of get the gist of what you said... but my knowledge of actual JS coding is cosmetic at best... so i dont know how to apply/code what you suggested above
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
    
    becomes:
    
    if ((evt.keyCode == 13) && (node.type=="text")) 
    {
    for (var index = 0; index < document.forms[0].elements.length; index++)
        {
         if (document.forms[0].elements[index] == node) 
             {
              document.forms[0].elements[index].focus();
              break;
             }
        }
    return false;
    }
    I've not tested this so I can't say it's all good and will work but this ought to get you close.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    thats one way to do it... but it doesnt work as planned. the logic behind it (as i can deduce) is to change the focus of the form to the next field... but couldn't we just catch the "evt.keyCode == 13" and change it to "evt.keyCode == 9" <-- tab

    something like:
    Code:
    if ((evt.keyCode == 13) && (node.type=="text")) {return evt.keyCode == 9}
    ?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can try but it would be more like:

    Code:
    if ((evt.keyCode == 13) && (node.type=="text")) {evt.keyCode == 9}
    return true;  // You want to return true regardless of the original keycode now
    I have no idea whether that'll work though.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    oops, double posted
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #13
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    n00pe, no luck...

    seems like me & roy are stumped. i tried:
    Code:
    if ((evt.keyCode == 13) && (node.type=="text")) 
     { 
      (evt.keyCode == 13) == (evt.keyCode == 9);
      return true;
     }
    and
    Code:
    function checkCR(evt) {
    var enter = evt.keyCode == 13;
    var tab = evt.keyCode == 9;
    var evt = (evt) ? evt : ((event) ? event : null);
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if ((enter) && (node.type=="text")) {
    	enter == tab;
    	return tab;}
    }
    document.onkeypress = checkCR;
    but that failed miserably

    anyone?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #14
    New Coder
    Join Date
    Jul 2002
    Location
    Portugal
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by canadianjameson
    n00pe, no luck...

    seems like me & roy are stumped. i tried:
    Code:
    if ((evt.keyCode == 13) && (node.type=="text")) 
     { 
      (evt.keyCode == 13) == (evt.keyCode == 9);
      return true;
     }
    and
    Code:
    function checkCR(evt) {
    var enter = evt.keyCode == 13;
    var tab = evt.keyCode == 9;
    var evt = (evt) ? evt : ((event) ? event : null);
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if ((enter) && (node.type=="text")) {
    	enter == tab;
    	return tab;}
    }
    document.onkeypress = checkCR;
    but that failed miserably

    anyone?
    maybe this...

    Code:
    if(evt.keyCode == 13 && node && node.type=="text") 
    { 
      evt.keyCode = 9;
      evt.returnValue = true;
      evt.cancelBubble = false;
      return true;
    }
    You don't want to know...

  • #15
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    nice try, unfortunantly it didnt work. this is proving to be challenging.

    anyone up for a good challenge?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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