{"id":978,"date":"2012-06-28T07:00:21","date_gmt":"2012-06-28T07:00:21","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=978"},"modified":"2012-06-28T07:00:21","modified_gmt":"2012-06-28T07:00:21","slug":"jquery-focus-set-focus-focus-textbox-textarea-select-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-focus-set-focus-focus-textbox-textarea-select-examples\/","title":{"rendered":"jQuery Focus Examples &#8211; Set Focus on Textbox, Textarea, Select, Checkbox, Radiobutton"},"content":{"rendered":"<p>Have you ever wanted to set focus on Textbox, Textarea, Select, etc. using jQuery, but didn&#8217;t know how to proceed? In this article, I am going to share a very easy and simple way to <em><strong>set focus in jQuery<\/strong><\/em>. Actual code is just 1 line, so it&#8217;s super easy to follow.<!--more--><\/p>\n<h2>Examples on using jQuery to Set Focus on an element<\/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=978\" 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 we have few form elements in our web page. Here&#8217;s the HTML source code I am using for the example. jQuery on focus examples will follow after the display of the HTML source code. The following code will include jQuery Input focus so that you can focus textbox, focus textarea and focus select dropdowns. So make sure that you read through the rest of the article.<\/p>\n<p><strong>Following is the basic HTML source code. Actual jQuery code will follow below this code as examples.<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery Focus | Set Focus | Focus Textbox, Textarea, Select Examples&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery_1.7.1_min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;form name=\"form1\" method=\"post\" action=\"\"&gt;\n&lt;p&gt;\n&lt;label for=\"city\"&gt;City&lt;\/label&gt;\n&lt;br&gt;\n&lt;input type=\"text\" name=\"city\" id=\"city\"&gt;\n&lt;\/p&gt;\n&lt;p&gt;\n&lt;label for=\"comments\"&gt;Comments&lt;br&gt;\n&lt;\/label&gt;\n&lt;textarea name=\"comments\" id=\"comments\" cols=\"45\" rows=\"5\"&gt;&lt;\/textarea&gt;\n&lt;\/p&gt;\n&lt;p&gt;\n&lt;label for=\"country\"&gt;Country&lt;\/label&gt;\n&lt;br&gt;\n&lt;select name=\"country\" id=\"country\"&gt;\n&lt;option&gt;Select a value&lt;\/option&gt;\n&lt;option value=\"USA\"&gt;USA&lt;\/option&gt;\n&lt;option value=\"UK\"&gt;UK&lt;\/option&gt;\n&lt;\/select&gt;\n&lt;\/p&gt;\n&lt;p&gt;\n&lt;input type=\"checkbox\" name=\"email\" id=\"email\"&gt;\n&lt;label for=\"email\"&gt;Email&lt;\/label&gt;\n&lt;input type=\"checkbox\" name=\"newsletter\" id=\"newsletter\"&gt;\n&lt;label for=\"newsletter\"&gt;Newsletter&lt;\/label&gt;\n&lt;\/p&gt;\n&lt;p&gt;\n&lt;label for=\"subscribe\"&gt;Subscribe?&lt;\/label&gt;\n&lt;br&gt;\n&lt;input type=\"radio\" name=\"subscribe\" id=\"subscribe\" value=\"yes\"&gt;\nYes\n&lt;input type=\"radio\" name=\"subscribe\" id=\"subscribe\" value=\"no\"&gt;\nNo\n&lt;\/p&gt;\n\n&lt;input type=\"submit\" name=\"focus_textbox\" id=\"focus_textbox\" value=\"Focus Textbox\" \/&gt;\n&lt;input type=\"submit\" name=\"focus_textarea\" id=\"focus_textarea\" value=\"Focus Textarea\" \/&gt;\n&lt;input type=\"submit\" name=\"focus_select\" id=\"focus_select\" value=\"Focus Select\" \/&gt;\n&lt;br&gt;\n&lt;input type=\"submit\" name=\"focus_email\" id=\"focus_email\" value=\"Focus Email\" \/&gt;\n&lt;input type=\"submit\" name=\"focus_newsletter\" id=\"focus_newsletter\" value=\"Focus Newsletter\" \/&gt;\n\n&lt;br&gt;\n&lt;input type=\"submit\" name=\"focus_radio\" id=\"focus_radio\" value=\"Focus Radio\"&gt;\n&lt;\/form&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><strong>Here&#8217;s individual code to focus different form elements:<\/strong><\/p>\n<h3>Example 1: Set Focus on Textbox when button is clicked using jQuery<\/h3>\n<pre class=\"lang:js decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\/\/Focus Textbox\n\n$('#focus_textbox').click(function(){\n\n$('#city').focus();\n\nreturn false;\n\n});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 2: Set Focus on Textarea when button is clicked using jQuery<\/h3>\n<pre class=\"lang:js decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\/\/Focus Textarea\n\n$('#focus_textarea').click(function(){\n\n$('#comments').focus();\n\nreturn false;\n\n});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 3 &#8211; Set Focus on Select dropdown when button is clicked using jQuery<\/h3>\n<pre class=\"lang:js decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\/\/Focus Select\n\n$('#focus_select').click(function(){\n\n$('#country').focus();\n\nreturn false;\n\n});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 4 &#8211; Set Focus on Checkbox when button is clicked using jQuery<\/h3>\n<pre class=\"lang:js decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\/\/Focus Checkbox\n\n$('#focus_email').click(function(){\n\n$('#email').focus();\n\nreturn false;\n\n});\n\n$('#focus_newsletter').click(function(){\n\n$('#newsletter').focus();\n\nreturn false;\n\n});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 5 &#8211; Set Focus on Radio Button when button is clicked using jQuery<\/h3>\n<pre class=\"lang:js decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\/\/Focus Radiobutton\n\n$('#focus_radio').click(function(){\n\n$('#subscribe').focus();\n\nreturn false;\n\n});\n\n});\n\n&lt;\/script&gt;<\/pre>\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=978\" 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>Your Turn!<\/h5>\n<p>Do you know of any other ways to <em><strong>set focus on form elements (input, textbox, textarea, checkbox, radiobutton, etc.) using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wanted to set focus on Textbox, Textarea, Select, etc. using jQuery, but didn&#8217;t know how to proceed? In this article, I am going to share a very easy and simple way to set focus in jQuery. Actual code is just 1 line, so it&#8217;s super easy to follow.<\/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,97,98,41],"class_list":["post-978","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","tag-jquery-set-focus","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-fM","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/978","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=978"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/978\/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=978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}