SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript set focus

    Hello,

    I have 4 menu items, where the content of each is featured in its own container on the same page:

    • Menu 1
    • Menu 2
    • Menu 3
    • Menu 4

    I want to make it so that if the user tabs through the menu items with their keyboard and presses enter, the corresponding container below it receives focus. This way keyboard users can make their selection and the content of their choice receives focus.

    If anyone can point me in the right direction, I would appreciate it.

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    You can use the tabindex HTML attribute.

    http://reference.sitepoint.com/html/a/tabindex

    You can specify in what order elements receive focus when tabbing.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I looked at tabindex and it can only give focus to certain elements. I'm looking to give focus to a container after the enter button is clicked.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    By container, do you mean div?

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Set focus</title>
      </head>
      
      <body>
        <div id="myDiv">Hello</div>
        
        <script>
          var div = document.getElementById("myDiv");
          div.setAttribute("tabindex", 1);
          div.focus();
        </script>
      </body>
    </html>
    As Force Flow points out a div can receive focus if it has a tabindex attribute

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. How would I make it so that a link activates the focus of "Hello"?

    In other words, we would have a link above "Hello" that says "Click here". When the user clicks on the link, "Hello" would receive focus.

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a more visual example of what I am trying to accomplish:


  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    You could do it like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Set focus</title>
      </head>
      
      <body>
        <a href="#" data-focus="divA">Link A</a>
        <div id="divA">Link A div</div>
    
        <a href="#" data-focus="divB">Link B</a>
        <div id="divB">Link B div</div>
        
        <script>
          function focusElement(e){
            var el = document.getElementById(this.dataset["focus"]);
            el.setAttribute("tabindex", 1);
            el.focus();
            e.preventDefault();
          }
    
          var anchors = document.getElementsByTagName("a");
    
          for (var i = 0, len = anchors.length; i<len; i++){
            anchors[i].addEventListener('click', focusElement, false);
          }
        </script>
      </body>
    </html>
    All you would have to ensure is that the data-focus attribute on the links, matches the id of the element that should receive focus.

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    I tried the code, but it doesn't seem to work:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Set focus</title>
        
            <script>
          function focusElement(e){
            var el = document.getElementById(this.dataset["focus"]);
            el.setAttribute("tabindex", 1);
            el.focus();
            e.preventDefault();
          }
    
          var anchors = document.getElementsByTagName("a");
    
          for (var i = 0, len = anchors.length; i<len; i++){
            anchors[i].addEventListener('click', focusElement, false);
          }
        </script>
        
      </head>
      
      <body>  
      
    <table width="25%">
    
    <tr>
    <td><a href="#" data-focus="divA">Link A</a></td>
    <td><a href="#" data-focus="divB">Link B</a></td>
    </tr>
    
    <tr>
    <td>
    
    <div id="divA">
    
    <a href="test.html">Link A1</a>
    <br /><a href="test.html">Link A2</a>
    <br /><a href="test.html">Link A3</a>
    
    </div>
    
    </td>
    <td>
    
    <div id="divB">
    
    <a href="test.html">Link B1</a>
    <br /><a href="test.html">Link B2</a>
    <br /><a href="test.html">Link B3</a>
    
    
    </div>
    
    </td>
    </tr>
    
    </table>  
        
    
      </body>
    </html>
    As you can see the tabbing order remains the same (left to right) even after Link A is clicked.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Just include the JavaScript at the end of your page (before the closing </body> tag) and all will be well
    As it stands you are trying to reference elements on the page before they exist.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Can't you just use fragment identifiers?

    e.g.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    :focus {
    	background:blue;
    	color:#fff
    }
    :target { background:red }
    </style>
    </head>
    
    <body>
    <h1>Fragment Identifier</h1>
    <ul id="menu">
    		<li><a id="menu1" href="#link1">Go to link 1</a></li>
    		<li><a id="menu2" href="#link2">Go to link 2</a></li>
    		<li><a id="menu3" href="#link3">Go to link 3</a></li>
    		<li><a id="menu4" href="#link4">Go to link 4</a></li>
    </ul>
    <h2>Destinations below</h2>
    <div id="link1">
    		<p>This is the content in link 1 and contains <a href="#">a link</a> and some other content <a href="#menu1">Go back to menu item 1</a>.</p>
    </div>
    <div id="link2">
    		<p>This is the content in link 2 and contains <a href="#">a link</a> and some other content <a href="#menu2">Go back to menu item 2</a>.</p>
    </div>
    <div id="link3">
    		<p>This is the content in link 3 and contains <a href="#">a link</a> and some other content <a href="#menu3">Go back to menu item 3</a>.</p>
    </div>
    <div id="link4">
    		<p>This is the content in link 4 and contains <a href="#">a link</a> and some other content <a href="#menu4">Go back to menu item 4</a>.</p>
    </div>
    </body>
    </html>

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Can't you just use fragment identifiers?
    <whine>But that doesn't involve JavaScript!</whine>

    Nice one, Paul!
    That's a much better solution.

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the first example with <script> at the very end. When you click on Link A or Link B, the corresponding div below it does receive focus. However, once that div is focused, you still can't navigate through the links that belong to Link A. If I am a keyboard user and I press Enter when Link A is focused, I should be able to tab through all the links that belong to Link A before going to Link B. That order is not currently followed.

    The second example is also great. My only caveat with that one is that on a long page, it forces the browser down to where the target area is. I would prefer that the top links remain visible on the screen, at it appears in the first example.

    Thank you both once again.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    I'm not to familiar with the specifics of keyboard navigation and what is expected behaviour and what isn't.
    You could do what you are suggesting programatically, but that feels like a dirty hack.
    Do you have any suggestions, Paul?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by spf00 View Post
    it forces the browser down to where the target area is. I would prefer that the top links remain visible on the screen, at it appears in the first example.
    That would be illogical captain.

    If the destination was below the fold (or if the window is small) then you would never see the content. It is only logical that an element in focus comes to the fore. Nothing else is sustainable in a real page as you don't want to break the web. Just normally tabbing through a page will cause the page to scroll.

    If you want the top links always visible then you may want to look at having a small fixed positioned sidebar containing those links.

    Of course without seeing your greater plan we can only give tips based on what we see here


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
  •