javascript - How would you switch focus to an input text upon clicking an item on a dropdown menu? -

javascript - How would you switch focus to an input text upon clicking an item on a dropdown menu? -

i have website has dropdown menu , input box. user comfort, thinking nice have when user clicks on alternative in dropdown menu, mouse cursor focused within input box can begin typing right away, rather having click every time.

how can achieved?

here jsfiddle: 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 to-do , nail 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 user assigned "1" dropdown menu placed in 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"> believe exist </section>

css

/*adder*/ @import url(http://fonts.googleapis.com/css?family=open+sans:400, 300, 600); * { padding:0; margin:0; } html { background:teal; } body { /*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/ } { color: #d9d9d9; text-decoration: none; } a:active, a:hover { text-decoration: underline; } #heady { text-align: center; width:100%; height:75px; background-color:#222; /*back colors*/ 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; /*back colors*/ font-family: tahoma; font-size: 16px; position:relative; } #feety { text-align: center; width:100%; height:100px; background-color:darkslateblue; /*back colors*/ 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 */ /** * modern browsers * 1. space content 1 way avoid opera bug when * contenteditable attribute included anywhere else in document. * otherwise causes space appear @ top , bottom of elements * clearfixed. * 2. utilize of `table` rather `block` necessary if using * `:before` contain top-margins of kid elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .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"; /*carat , spaces*/ float:right; font-weight:900; padding: 0px 0px; font-size:100%; line-height:20px; /*keeps carat in center of text*/ } 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;/* got activeitem centered list text way*/ margin-right:0px; } ul.navbar li { position: relative; } ul.navbar li { display: block; color: white; padding:10px 5px; text-decoration:none; transition: .2s ease-in; } ul.navbar li a:hover, ul.navbar li:hover > { background:#a6d0e1; /*leaving now, maintain in mind things bold when alter gradient*/ 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; } /*lister*/ .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 > { float: right; text-decoration: none; color: #22313f; font-weight: bold; transition: .2s ease-in-out; } .lister li > a:hover { font-size: 110%; color: #c0392b; } .lister li:before { content: "#"; /*carat , spaces*/ float:left; font-weight:900; padding: 0px 0px; font-size:100%; line-height:20px; /*keeps carat in center of text*/ }

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") { /*i guess 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(''); homecoming false; }); ul.on('click', 'a', function (e) { e.preventdefault(); $(this).parent().remove(); if (ul.children().length == 0) { ul.removeclass('active') .addclass('inactive'); input.focus(); } }); });

you're using var ul = $('.lister ul')

go take .lister , kid ul in html

i mean want target needed dropdown ul anchors using right selector:

$(".navbar.cf li ul li").on("click", "a", function(e){ e.preventdefault(); input.focus(); });

http://jsfiddle.net/jyrbepyz/5/

javascript jquery html css