Pressing Tab to Focus on <div>

Discussion in 'Javascript' started by mumebuhi, Jul 21, 2008.

  1. mumebuhi

    mumebuhi Guest

    Hi,

    How do you make an element (e.g. <div>) to receive focus when pressing
    TAB key? I understand that some elements such as <select> and <input>
    by default will receive focus when the TAB key is pressed. Is there a
    way to tweak a <div> to get the same treatment?

    Thank you.


    Buhi
     
    mumebuhi, Jul 21, 2008
    #1
    1. Advertising

  2. mumebuhi

    SAM Guest

    mumebuhi a écrit :
    > Hi,
    >
    > How do you make an element (e.g. <div>) to receive focus when pressing
    > TAB key? I understand that some elements such as <select> and <input>
    > by default will receive focus when the TAB key is pressed.


    and more useful with the attribute 'tabindex'


    > Is there a way to tweak a <div> to get the same treatment?


    Not in html.
    perhaps could you try with an anchor in this div ?
    (that doesn't work on my Fx)

    What do you expect to do ?
    Tab to only one specific div ?
    or to jump by tabbing from div to div ?

    In all cases you'll have to catch the keycode of tab,
    something like:

    <body onkeydown="KeyCheck(event);" onkeyup="if(cod==9)jump();">

    Your div(s) must all of then have an id.

    <script type="text/javascript">
    var cod=0, goal, D=[];
    function KeyCheck(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    var evver = (evt.target) ? evt.target : ((evt.srcElement)
    ?evt.srcElement : null );
    cod = evt.keyCode;
    goal = evver
    }
    function init() {
    var d = document.getElementsByTagName('DIV');
    for(var i=0, n<d.length; i<n; i++) {
    d.idx = i;
    D = d;
    }
    }
    window.onload = init;
    function jump() {
    if(goal && (!goal.tagName || goal.tagName != 'DIV')
    goal = goal.parentNode;
    while(goal.tagName!='DIV') goal = goal.parentNode;
    var i = (goal.idx>=D.length-1)? 0 : goal.idx+1;
    location = '#'+D.id;
    }
    </script>

    Not tested !

    --
    sm
     
    SAM, Jul 21, 2008
    #2
    1. Advertising

  3. mumebuhi

    mumebuhi Guest

    Maybe a simpler question, when a <a id="a_id"> is onFocus, can we
    change the focus to e.g. <div id="div_id">?

    Any JavaScript object responsible to keep track what currently is on
    focus?
     
    mumebuhi, Jul 21, 2008
    #3
  4. mumebuhi

    SAM Guest

    mumebuhi a écrit :
    > Maybe a simpler question, when a <a id="a_id"> is onFocus, can we
    > change the focus to e.g. <div id="div_id">?
    >
    > Any JavaScript object responsible to keep track what currently is on
    > focus?


    the JS function focus() works only with elements of form

    You can't give focus to a div, it's a nonsens.
    (a div can't have an html action, so what to do with a focus ?)


    but you can do :
    location = "#"+'div_id'
    to scroll to this div.


    not tried but perhaps something like

    <div id="div_id">
    <a id="a_id" onfocus="var a=this.parentNode;
    while(a.tagName!='DIV') a=a.parentNode; alert('div is: '+a.id);">
    </div>

    --
    sm
     
    SAM, Jul 21, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Philip Townsend

    button focus and pressing enter

    Philip Townsend, Aug 14, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    8,781
  2. Philip Townsend

    button focus and pressing enter

    Philip Townsend, Aug 25, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    2,264
    Philip Townsend
    Aug 25, 2003
  3. Replies:
    1
    Views:
    323
    Andrew Thompson
    Feb 11, 2005
  4. Franck DARRAS

    [DIV][CSS][TAB] Div mask my input

    Franck DARRAS, Feb 27, 2004, in forum: HTML
    Replies:
    0
    Views:
    666
    Franck DARRAS
    Feb 27, 2004
  5. Roger
    Replies:
    3
    Views:
    361
Loading...

Share This Page