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 25
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    User wants to use arrow keys

    User is entering the data in this form. and he wants to use arrow keys to go up and down. pl answer

    <form name="testform" method="post" action="test.asp">
    <table border=0>
    <tr>
    <td><input type="text" name="text1"></td>
    <td><input type="text" name="text2"></td>
    <td><input type="text" name="text3"></td>
    <td><input type="text" name="text4"></td>
    </tr>
    <tr>
    <td><input type="text" name="text4"></td>
    <td><input type="text" name="text5"></td>
    <td><input type="text" name="text6"></td>
    <td><input type="text" name="text7"></td>
    </tr>
    <tr>
    <td><input type="text" name="text8"></td>
    <td><input type="text" name="text9"></td>
    <td><input type="text" name="text10"></td>
    <td><input type="text" name="text11"></td>
    </tr>
    <tr>
    <td><input type="text" name="text11"></td>
    <td><input type="text" name="text12"></td>
    <td><input type="text" name="text13"></td>
    <td><input type="text" name="text14"></td>
    </tr>

    </table>
    </form>

  • #2
    New Coder
    Join Date
    May 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh

    You'll need some stuff. First, set your script to read keyboard buttons. Note that this doesn't work for all keyboards. The keycode might be different, so try it out before you copy and paste.

    document.onkeypress=keyDown
    function keyDown()
    {
    if (event.keyCode == 30) {do_something} //Up Arrow
    if (event.keyCode == 31) {do_something} //Down Arrow
    }

    Next, you have to have a script that finds which element is focused. Then it should move to the next element by using testform.some_element.focus() to put the user's insertion point in the newly focused element. Hope that helps.

  • #3
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the up and down arrow keys are typically used for scrolling the page.

    if you're going to use them for something else, like navigating the form then you should check that a form element has the focus so that the original functionality of the page isn't broken too much.

    anyway, you don't even need to do this. if you use the tabIndex attribute in your form elements, the form's users can press tab to go down the form fields, and press shift-tab to go up the form.

    the tabIndex attribute takes numeric values to set the order.

    can't you just inform the client that this is easier and better in the scheme of things.

  • #4
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    well this sucks

    here's a super crappy version that moves focus when pressing letter "d" - i got letter D and letter A figured out, but that's it - so if you keep it as is you have to make sure your users dont type anything with letter "d" ever goes it jumps right away

    Code:
    <html> 
    <head>
    <script language="javascript">
    var focusobj;
    function dmove(k)
    {
     var code=-1 
     if(document.layers)   code=k.which; 
     if(document.all)      code=event.keyCode 
     if(code==100)
      {
       for (i=0;i<document.f.elements.length;i++)
        {if (focusobj == document.f.elements[i])
          {i++;
           if (i>=document.f.elements.length) i=0;
           document.f.elements[i].focus();
           break;
          }
        } 
      }
    } 
    function imatextfeild(obj)
    {focusobj=obj;
    }
    if (document.layers)
     {document.captureEvents(event.keypress);
     }
    document.onkeypress=dmove;
    </script> 
    <head> 
    
     
    <body onload="focusobj=document.f.elements[0];">
    <form name="f" id="f"> 
    <input type="text" onFocus="imatextfeild(this);">
    <input type="text" onFocus="imatextfeild(this);">
    </form>
    </body>
    </html>
    p.s. i didn't come up with that - i don't know who did, i found some scraps from a script i got a wihle back and did some very minor mods.

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This little demo might be helpful

  • #6
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts

    heh

    Hey that demo link was kinda cool! I was having some fun with it!

    But I noticed a bug, if you hold the down arrow key so that it expands the screen down and starts scrolling, the cross-browser.com thing gets stuck down there.. it's funny to watch it go off the screen all over the place!

    Edit: oops, nevermind, if you keep scrolling back up so that you shrink the page so there's no more scroll bar, the cross-browser.com thing comes back... still pretty freaked out though


    Sadiq.
    Last edited by sad69; 05-21-2004 at 01:46 AM. Reason: nm..

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by jbot
    anyway, you don't even need to do this. if you use the tabIndex attribute in your form elements, the form's users can press tab to go down the form fields, and press shift-tab to go up the form.

    the tabIndex attribute takes numeric values to set the order.

    can't you just inform the client that this is easier and better in the scheme of things.
    I'm with jbot here.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Sadiq, glad you liked my toy

    Hi ksridhar69, altho a javascript solution would be more fun I have to admit that I also agree with jbot.

  • #9
    New Coder
    Join Date
    May 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh

    Geez. If you really want to do it the hard way with JavaScript, check this out: http://safari.oreilly.com/JVXSL.asp?...htmlckbk-APP-B

    It has keycodes for you to play with. I also believe tabIndex would be better, but who really cares? Its your web page and you can do what you want. I hope that helps.

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JSgamer2049
    but who really cares? Its your web page and you can do what you want.
    Spoken like a true hobbyist
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #11
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    All that aside. It appears that JsGammer has drug this unanswered post up from two years ago. (06-23-2002, 09:13 PM)

  • #12
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    I blame it on GoogleBot. And Yahoo! Slurp. And MSNBot. And Zyborg Nutbot.

    These forums were never spidered before, and now this is what catch the spiders get in their nets after invading.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #13
    New Coder
    Join Date
    Mar 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I agree that using the tabIndex is the simplest way, but not many people know that using shift-tab makes you go back, so I'm with ksridhar69 on this one,

    I need the form to 'act like' a excel spreadsheet, or as close to one as possible. I know I'm not going to be able to get select>drag>copy functionality working within the form [can I?], but using the arrow keys to navigate the from is a must.

    I'll see what I can come up with and post the results here for you guys to pick holes in [pretty new at JavaScript].

  • #14
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by elvie
    I know I'm not going to be able to get select>drag>copy functionality working within the form [can I?]
    you can. but because Moz doesn't support copy and paste operations without signed scripts, you'll need to hack together some clever DHTML to make it work. it's not difficult tho. just break it down into several steps and author functions or objects for each phase.

  • #15
    New Coder
    Join Date
    Mar 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jbot
    you can. but because Moz doesn't support copy and paste operations without signed scripts, you'll need to hack together some clever DHTML to make it work. it's not difficult tho. just break it down into several steps and author functions or objects for each phase.
    I can? do you know of any posts, tutorials that would give me some further points on this? I haven’t got a clue where to start.

    Thanks


  •  
    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
    •