{"id":1127,"date":"2012-09-11T20:34:53","date_gmt":"2012-09-11T20:34:53","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1127"},"modified":"2012-09-11T20:34:53","modified_gmt":"2012-09-11T20:34:53","slug":"jquery-focus-textbox-when-div-is-clicked","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-focus-textbox-when-div-is-clicked\/","title":{"rendered":"jQuery Focus Textbox When Div is clicked"},"content":{"rendered":"<p>Have you ever wanted to focus textbox when div is clicked but always wondered how to do it? In this article, I am going to share with you a very easy way to <em><strong>automatically set focus to an input textbox when a Div is clicked, \u00a0using jQuery<\/strong><\/em>. \u00a0The actual code is just 1 line, so it&#8217;s super easy to follow along. Read on to find out more.<img decoding=\"async\" title=\"More...\" alt=\"\" src=\"https:\/\/theextremewebdesigns.com\/blog\/wp-includes\/js\/tinymce\/plugins\/wordpress\/img\/trans.gif\" \/><\/p>\n<h2>Examples on using jQuery to Focus Textbox when Div is clicked<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1127\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let&#8217;s assume that we have a div with ID &#8220;#my_div&#8221; and an input box with ID &#8220;name&#8221;. Here is how you can <strong>focus the &#8220;name&#8221; input box when the div &#8220;my_div&#8221; is clicked:<\/strong><\/p>\n<p><strong>Full Source code:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Focus textbox when div is clicked with jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n#my_div {\nborder: 1px solid #F00;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div id=\"my_div\"&gt;This is my div. Click on me to focus the \"name\" input box&lt;\/div&gt;\n&lt;br&gt;\n&lt;br&gt;\n\n&lt;form name=\"form1\" method=\"post\" action=\"\"&gt;\n&lt;label for=\"Name\"&gt;Name&lt;\/label&gt;\n&lt;input type=\"text\" name=\"name\" id=\"name\"&gt;\n&lt;\/form&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#my_div').click(function() {\n\n$('#name').focus();\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>You can simply rename the input box and\/or the div ID to whatever you like and then update the jQuery code as well. If you would rather use the class of an element to set focus on the input box, you can do it like so:<\/p>\n<pre class=\"lang:js decode:true\">$('.my_div_class').click(function() {\n\n$('#name').focus();\n\n});<\/pre>\n<p>The above code assumes that you have a class &#8220;my_div_class&#8221; applied to your Div.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1127\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Simple, isn&#8217;t it?<\/h5>\n<p>Do you know of any other ways to use<strong> <\/strong><em><strong>jQuery to set focus on textbox when div is clicked<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wanted to focus textbox when div is clicked but always wondered how to do it? In this article, I am going to share with you a very easy way to automatically set focus to an input textbox when a Div is clicked, \u00a0using jQuery. \u00a0The actual code is just 1 line, so [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,116,41],"class_list":["post-1127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-focus-textbox","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-ib","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1127"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}