Click here to Skip to main content
Click here to Skip to main content

ASP.NET Select Dropdownlist item using Tab key

, 30 Jun 2012
Rate this:
Please Sign up or sign in to vote.
Select drop-down list item with jQuery plug-in

select item in drop-down list using tab key

Table of Contents

Introduction

A couple days ago I saw a post from one of the CodeProject member asking something like “how to select data from the drop-down list using tab selection”. I’m assuming he was referring to how to use the keyboard Tab key to select item in the drop-down list. In general, we can use the up and down arrow key to select the item from the highlighted drop-down list. I did a Google search and didn’t find much information about it and I find this problem somewhat interesting. So I decided to use jQuery to implement the workaround. Sample code are attached, everyone are welcome to download it.

Implementation

Show in listing 1-3 is the brief summary of the plug-in and comments are included on each line. The key code for the Tab key is 9. By default, pressing the Tab key will cause the cursor to advance to the next control. We can use event.preventDefault() method to prevent the default action of an element from happening. Now, when the user presses on the Tab key, the item in the drop-down list will switch focus on the next item in the list. Basically the next selected index is equal to the current selected index plus one. In order to get rid of the blank drop-down list (Figure 1), when the selection reaches the last item, set the selected index to 0.

Listing 1

//Tab key pressed
if (keyCode == 9) {
    e.preventDefault();
    //increase the selected index by 1 and set selected to the new index
    $this.prop('selectedIndex', parseInt(curSelItemIndex) + 1);
    //if selected index == number of items
    //  set the selected index=0
    if (curSelItemIndex == items - 1) {
        $this.prop('selectedIndex', 0);
    }
}

Figure 1

drop-down list first item blank

The next task is to remove the focus from the selected drop-down list and set the focus to the next control when the escape key is pressed. We can use the jQuery blur() function to remove the focus from the highlighted drop-down list. After that search for the next first element within the selected drop-down list object and set the focus to that element.

Listing 2

//Escape key pressed
if (keyCode == 27) {
    e.preventDefault();
    // remove the focus from the selected dropdownlist and
    $this.blur();
    // move the focus on selected control to the next control
    jQuery(":input:eq(" + (jQuery(":input").index($this) + 1) + ")").focus();
    return;
}

The final task is to ensure that pressing the Shift + Tab key will bring the focus back to the previous control. Please refer to listing 3.

Listing 3 

//Shift + Tab Key
if (keyCode == 9 && e.shiftKey) {
    e.preventDefault();
    // remove the focus from the selected dropdownlist and
    $this.blur();
    // move the focus on selected control to the previous control
    jQuery(":input:eq(" + (jQuery(":input").index($this) - 1) + ")").focus();
    return;
}

Using the code

Include the jQuery library and the plug-in and as many drop-down list control/element as you want into the web page. Please refer to listing 4 on how to call the plug-in.

Listing 4

<script type="text/javascript">
        $(document).ready(function () {
            $("[id$='DropDownList1']").myDDLPlugin();
            $("[id$='DropDownList3']").myDDLPlugin();
            $("[id$='DropDownList5']").myDDLPlugin();
        });
    </script>

Point of Interest

At one point I was stuck trying to figure out the solution to move the focus to previous and next control with cross browser compatibility support. Later I found the workaround on http://stackoverflow.com. For some reason the following code works fine without any input tag on the page. The code clearly indicated that it should look for the next input element. Anyway, I have tested it on both the HTML and ASP.NET page and it work fine.

Listing 5 

jQuery(":input:eq(" + (jQuery(":input").index($this) + 1) + ")").focus(); //next
jQuery(":input:eq(" + (jQuery(":input").index($this) - 1) + ")").focus(); //previous

I think this plug-in might be handy for in-house data entry web application.

Conclusion

I hope someone will find this information useful and make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might miss some important information in this article. Please send me an email if you want to help improve this article.

Tested on: Internet Explorer 9.0, Firefox 12.0, Google Chrome 19.0, Apple Safari 4.0.4

browsers

History

06/30/2012: Initial version.

Resources

http://stackoverflow.com/questions/290535/best-way-to-find-next-form-input-element-in-jquery
http://stackoverflow.com/questions/4954403/can-jquery-keypress-detect-more-than-one-key-at-the-same-time
http://docs.jquery.com/Plugins/Authoring
http://api.jquery.com/event.preventDefault/

Watch this script in action

Demo

Download

Download 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bryian Tan
Software Developer
United States United States
I have over three years of experience working with Microsoft technologies. I have earned my Microsoft Certified Technology Specialist (MCTS) certification. I'm a highly motivated self-starter with an aptitude for learning new skills quickly.

Comments and Discussions

 
QuestionI guess it works.. PinmemberHaBiX1-Jul-12 21:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 1 Jul 2012
Article Copyright 2012 by Bryian Tan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid