{"id":2546,"date":"2011-01-13T20:33:56","date_gmt":"2011-01-13T15:03:56","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=2546"},"modified":"2015-05-19T17:46:59","modified_gmt":"2015-05-19T12:16:59","slug":"jquery-script-to-put-focus-on-first-field-of-any-page","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/","title":{"rendered":"JQuery script to put focus on first field of any page"},"content":{"rendered":"<p>Hi,<\/p>\n<p>In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors.<\/p>\n<p>I searched a lot and with the help of my colleague we came out with a simple JQuery script to put focus on the first input field on any page whenever the page loads.<\/p>\n<p>The script i used is:-<\/p>\n<pre>\r\n   if (jQuery('.errors').size() &gt; 0) {\r\n       jQuery('input.errors:first').focus();\r\n       jQuery('.errors input:visible:first').focus();\r\n     }\r\n   else {\r\n      jQuery('input:text:visible:first').focus();\r\n    }\r\n\r\n\r\n<\/pre>\n<p>I put it in the layout and it works for every gsp which has that layout.<\/p>\n<p>&nbsp;<\/p>\n<p>It worked for me.<br \/>\nHope it Helps.<\/p>\n<p>Vishal Sahu<br \/>\nvishal@intelligrape.com<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":12,"footnotes":""},"categories":[7],"tags":[27,719,720],"class_list":["post-2546","post","type-post","status-publish","format-standard","hentry","category-grails","tag-jquery","tag-jquery-focus","tag-jquery-script"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Vishal Sahu\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"TO THE NEW BLOG\" \/>\n\t\t<meta property=\"og:type\" content=\"blog\" \/>\n\t\t<meta property=\"og:title\" content=\"JQuery script to put focus on first field of any page | TO THE NEW Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@tothenew\" \/>\n\t\t<meta name=\"twitter:title\" content=\"JQuery script to put focus on first field of any page | TO THE NEW Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#article\",\"name\":\"JQuery script to put focus on first field of any page | TO THE NEW Blog\",\"headline\":\"JQuery script to put focus on first field of any page\",\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/vishal\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"},\"datePublished\":\"2011-01-13T20:33:56+05:30\",\"dateModified\":\"2015-05-19T17:46:59+05:30\",\"inLanguage\":\"en-US\",\"commentCount\":3,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#webpage\"},\"articleSection\":\"Grails, jquery, jQuery focus, jQuery Script\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/grails\\\/#listItem\",\"name\":\"Grails\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/grails\\\/#listItem\",\"position\":2,\"name\":\"Grails\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/grails\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#listItem\",\"name\":\"JQuery script to put focus on first field of any page\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#listItem\",\"position\":3,\"name\":\"JQuery script to put focus on first field of any page\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/grails\\\/#listItem\",\"name\":\"Grails\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\",\"name\":\"TO THE NEW Blog\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/vishal\\\/#author\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/vishal\\\/\",\"name\":\"Vishal Sahu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/04ab2997182dff5e957d14b30bdc77fc09933e3d6e7f97b00f8ee27b193602a2?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Vishal Sahu\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#webpage\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/\",\"name\":\"JQuery script to put focus on first field of any page | TO THE NEW Blog\",\"description\":\"Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-script-to-put-focus-on-first-field-of-any-page\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/vishal\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/vishal\\\/#author\"},\"datePublished\":\"2011-01-13T20:33:56+05:30\",\"dateModified\":\"2015-05-19T17:46:59+05:30\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\",\"name\":\"TO THE NEW Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"JQuery script to put focus on first field of any page | TO THE NEW Blog","description":"Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my","canonical_url":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#article","name":"JQuery script to put focus on first field of any page | TO THE NEW Blog","headline":"JQuery script to put focus on first field of any page","author":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/vishal\/#author"},"publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"},"datePublished":"2011-01-13T20:33:56+05:30","dateModified":"2015-05-19T17:46:59+05:30","inLanguage":"en-US","commentCount":3,"mainEntityOfPage":{"@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#webpage"},"isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#webpage"},"articleSection":"Grails, jquery, jQuery focus, jQuery Script"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.tothenew.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/category\/grails\/#listItem","name":"Grails"}},{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/category\/grails\/#listItem","position":2,"name":"Grails","item":"https:\/\/www.tothenew.com\/blog\/category\/grails\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#listItem","name":"JQuery script to put focus on first field of any page"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#listItem","position":3,"name":"JQuery script to put focus on first field of any page","previousItem":{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/category\/grails\/#listItem","name":"Grails"}}]},{"@type":"Organization","@id":"https:\/\/www.tothenew.com\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/www.tothenew.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.tothenew.com\/blog\/author\/vishal\/#author","url":"https:\/\/www.tothenew.com\/blog\/author\/vishal\/","name":"Vishal Sahu","image":{"@type":"ImageObject","@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/04ab2997182dff5e957d14b30bdc77fc09933e3d6e7f97b00f8ee27b193602a2?s=96&d=mm&r=g","width":96,"height":96,"caption":"Vishal Sahu"}},{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#webpage","url":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/","name":"JQuery script to put focus on first field of any page | TO THE NEW Blog","description":"Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/#breadcrumblist"},"author":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/vishal\/#author"},"creator":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/vishal\/#author"},"datePublished":"2011-01-13T20:33:56+05:30","dateModified":"2015-05-19T17:46:59+05:30"},{"@type":"WebSite","@id":"https:\/\/www.tothenew.com\/blog\/#website","url":"https:\/\/www.tothenew.com\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"TO THE NEW BLOG","og:type":"blog","og:title":"JQuery script to put focus on first field of any page | TO THE NEW Blog","og:description":"Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my","og:url":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/","og:image":"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","og:image:secure_url":"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","twitter:card":"summary","twitter:site":"@tothenew","twitter:title":"JQuery script to put focus on first field of any page | TO THE NEW Blog","twitter:description":"Hi, In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors. I searched a lot and with the help of my","twitter:image":"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png"},"aioseo_meta_data":{"post_id":"2546","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"created":"2021-04-29 15:28:38","updated":"2024-02-29 09:26:53","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.tothenew.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.tothenew.com\/blog\/category\/grails\/\" title=\"Grails\">Grails<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tJQuery script to put focus on first field of any page\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.tothenew.com\/blog"},{"label":"Grails","link":"https:\/\/www.tothenew.com\/blog\/category\/grails\/"},{"label":"JQuery script to put focus on first field of any page","link":"https:\/\/www.tothenew.com\/blog\/jquery-script-to-put-focus-on-first-field-of-any-page\/"}],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/2546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=2546"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/2546\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=2546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=2546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=2546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}