I have a website with a dropdown menu and an input box. I want the user experience to be more seamless by automatically focusing the mouse cursor inside the input box when they click on an option in the dropdown menu. This way, users can start typing right away without needing to click into the input box each time.

Is there a way to achieve this functionality?

Here is the Jsfiddle link: http://jsfiddle.net/mlynn/jyrbepyz/3/

Thank you.

HTML

<section id="heady">
    <div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b><a href="index.html">Site</b></a></p></div>

    <div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">    
            <a href="index.html">Home</a> | 
            <a href="index.html">Generic</a> |
            <a href="index.html">Elements</a> |
            <a href="index.html">Sign Up</a>
    </div>
</section>
<section id="wrapper">
    <br><br>
    <img src="images/blacksquare.png" width="525" height="197"></img>

    <br><br><br>
    <div>
        <div style="vertical-align:top;display:inline-block;float:left;">        
            <ul class="navbar cf">
                <!-- <li><a href="#">item 2</a></li> -->
                <li style="width:200px;">
                    <a href="#" class="ActiveListItem">#</a>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                    </ul>
                </li>
            </ul>
        </div>                                                               
        <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
            <form action="">
                <input type="text" id="todo" placeholder="Enter a To-do and hit enter">
            </form>
            <br>
            <!-- <ul class="active">
                <li>Work <a href="">X</a></li>
                <li>Sleep <a href="">X</a></li>
                <li>Repeat <a href="">X</a></li>
            </ul> -->
        </div>
        <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
            <ul class="active">
                <li>Work <a href="">X</a></li>
                <li>Sleep <a href="">X</a></li>
                <li>Repeat <a href="">X</a></li>
            </ul>
        </div>
    </div>             
    <div class="Category1">
        <!--list items that user assigned "1" from dropdown menu would be placed in this div-->
    </div>

    <div class="Category2">
    </div>
    <div class="Category3">
    </div>
    <div class="Category4">
    </div>
    <div class="Category5">
    </div>  
    <div class="Category6">
    </div>  
    <div class="Category7">
    </div> 
</section>

<section id="feety">
I think, therefore I am
</section>

CSS

/* Theme */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);


 * {
    padding:0;
    margin:0;
}


html {
 background:teal;
}


body {
}

a {
    color: #D9D9D9;
    text-decoration: none;
}
a:active, a:hover {
    text-decoration: underline;
}



#heady {
    text-align: center;
    width:100%;
    height:75px;
    background-color:#222;                      
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}

#wrapper {
    text-align: center;
    width:1000px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:teal;                       
    font-family: Tahoma;
    font-size: 16px;
    position:relative; 
}


#feety {
    text-align: center;
    width:100%;
    height:100px;
    background-color:darkslateblue;                       
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}





.Category1 {
    background:blue;
}


.Category2 {
    background:green;
}

.Category3 {
    background:yellow;
}

.Category4 {
    background:orange;
}

.Category5 {
    background:purple;
}

.Category6 {
    background:gold;
}

.Category7 {
    background:maroon;
}

/* clearfix */
/**
 * For modern browsers
 */
.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}

.cf:after {
    clear: both;
}

.cf {
   * zoom: 1;
}


ul.navbar {

  background:white; 
  border-style:solid;
  border-color:gray;
  border-width:1px;
  width: 200px;
  border-radius: 4px;

}


.ActiveListItem:after {
    content: "\25BC\00a0\00a0";                        
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;             
}




ul.navbar li a.ActiveListItem {
    background:white !important;
    color:black;
    border-style:solid;
    border-color:white;
    border-radius:4px;
    padding:3px 5px !important;
    font-weight:normal !important;
    margin-left:14px;
    margin-

right:0px;

}

ul.navbar li {
    position: relative;
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .2s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    background:#a6d0e1; 
    color: #333;
    font-weight:900;

}

    ul.navbar li ul {
        margin-top: 1px;
        position: absolute;
        background: #222;
        font-size: 14px;
        min-width: 200px;
        display: none;
        z-index: 99;
        box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }


.container {
    width: 60%;
    margin: 0px auto;
}

form {}

input,
ul {
    background: #eee;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    font-family:"Tahoma";
}

input {
    padding: 10px 10px 10px 20px;
    border: 1px solid #ccc;
}

.lister ul {
    list-style: square inside;
    padding: 10px;
}

.active { border: 1px solid #ccc; }
.inactive { display: none; }

.lister li {
    padding: 10px;
    font-weight: 600;
    color: #34495e;
}

.lister li:nth-child(odd) {
    background: #dadfe1;
    border-radius: 5px;
}

.lister li > a {
    float: right;
    text-decoration: none;
    color: #22313f;
    font-weight: bold;
    transition: all .2s ease-in-out;
}

.lister li > a:hover {
    font-size: 110%;
    color: #c0392b;
}


.lister li:before {
    content: "#";                   
    float:left;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;            
}

JS

// sub menus identification
$(function() {

    $('.navbar ul li a').click(function(){  
        $('.navbar > li:first-child > a').text($(this).text());
        $('.navbar > li > ul').addClass('hidden');
        $('.navbar li ul').slideToggle(100);
    });

    $('.navbar > li').mouseenter(function(){
        $(this).find('ul').removeClass('hidden');
    });

    $('.ActiveListItem').click(function(){        
        $('.navbar li ul').slideToggle(300);
    });    
});
    //newList
$(document).ready(function() {

    var ul = $('.lister ul'),
        input = $('input');

    input.focus();  

    $('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                /*Fantasy code goes here...?*/
            }

            ul.append('<li>' + activeNumber + ' ' +inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');
            }
        };
        input.val('');
        return false;
    });

    ul.on('click', 'a', function (e) {
        e.preventDefault();
        $(this).parent().remove();

        if (ul.children().length == 0) {
            ul.removeClass('active')
                .addClass('inactive');
            input.focus();  
        }
    });
});