{"id":65,"date":"2010-05-10T12:34:37","date_gmt":"2010-05-10T07:04:37","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=65"},"modified":"2010-05-10T12:34:37","modified_gmt":"2010-05-10T07:04:37","slug":"highlight-current-field-using-jquery","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/highlight-current-field-using-jquery\/","title":{"rendered":"Highlight Current field using JQuery"},"content":{"rendered":"

Write below HTML code :<\/p>\n

This will create two text boxes.<\/p>\n

\n<form>\n\t<div>\n\t\t<label for="Name">Name:<\/label>\n\t\t<input name="Name" type="text"><\/input>\n\t<\/div>\n\t<div>\n\t\t<label for="Email">Email:<\/label>\n\t\t<input name="Email" type="text"><\/input>\n\t<\/div>\n<\/form>\n<\/pre>\n
Using jQuery, we can watch for an event where an input form comes into focus:<\/p>\n
Add link to JQuery file in script tag as shown in below line:<\/p>\n
\n<script type="text\/javascript" src="http:\/\/jqueryjs.googlecode.com\/files\/jquery-1.3.2.min.js" \/>\n<\/pre>\n
Now, add below CSS in document.<\/p>\n
\ndiv.curFocus {\nbackground: #fdecb2;\n}\n<\/pre>\n
Then at last write JQuery \/ javascript code on focus event and blur event (opposite of focus event in javascript ) .<\/p>\n
\n$(document).ready(function(){\n\n$("input").focus(function() {\n\n$(this).parent().addClass("curFocus")\n\n});\n\n$("input").blur(function() {\n\n$(this).parent().removeClass("curFocus")\n\n});\n\n});\n<\/pre>\n
We are using the advantage of jquery of adding and removing the CSS class. we cannot left blank to CSS class, as it may remove the existing other class from the tag.<\/p>\n
$(document).ready(function(){<\/pre>\n
This line causes the execution of jquery after complete loading of page.<\/p>\n
Output:<\/strong><\/p>\n
\"Selecting<\/a>
Selecting field using jquery<\/figcaption><\/figure>\n
View Demo<\/strong><\/a><\/h1>\n","protected":false},"excerpt":{"rendered":"
Write below HTML code : This will create two text boxes. <form> <div> <label for="Name">Name:<\/label> <input name="Name" type="text"><\/input> <\/div> <div> <label for="Email">Email:<\/label> <input name="Email" type="text"><\/input> <\/div> <\/form> Using jQuery, we can watch for an event where an input form comes into focus: Add link to JQuery file in script tag as shown in below line: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26],"tags":[67,338,126,134],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-web","tag-javascript","tag-jquery"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3134,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-helptext-like-custom-tooltip-using-jquery\/","url_meta":{"origin":65,"position":0},"title":"Salesforce Helptext like Custom Tooltip using JQuery","author":"Jitendra","date":"February 4, 2013","format":false,"excerpt":"Welcome back Readers. This is my first blog entry for year 2013, i know its too late. However i can ensure that i have lots of unique post which will come this year. I am starting this year with very light post , mimic the help-text style of Salesforce. Download\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Salesforce like Helptext - Tooltip using JQuery","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/02\/Salesforce-like-Tooltip-using-JQuery.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":65,"position":1},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2281,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/disable-inputs-after-submit-to-avoid-double-submission-using-jquery-and-ajax\/","url_meta":{"origin":65,"position":2},"title":"Disable inputs after submit to avoid double submission using JQuery and Ajax","author":"Jitendra","date":"June 24, 2011","format":false,"excerpt":"This article will explain the safe way to submit the forms using JQuery. It will avoid accidental double submission.","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Disable inputs after submit to avoid double submission using JQuery","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/06\/Disable-inputs-after-submit-to-avoid-double-submission-using-JQuery.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2706,"url":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/handling-colon-in-element-id-in-jquery-visualforce-problem\/","url_meta":{"origin":65,"position":3},"title":"Handling Colon in Element ID in JQuery – Visualforce problem","author":"Jitendra","date":"February 8, 2012","format":false,"excerpt":"Resolving the JQuery error when the Element ID contains colon with Live Demo","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1527,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/ajax-based-multiselect-jquery-autocomplete-control-in-asp-net\/","url_meta":{"origin":65,"position":4},"title":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","author":"Jitendra","date":"February 19, 2011","format":false,"excerpt":"Tutorial on creating Ajax Based Multiselect JQuery Autocomplete User Control in ASP.Net","rel":"","context":"In "ASP.NET"","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/02\/Ajax-Based-Multiselect-JQuery-Autocomplete-Control-in-ASP.Net_.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2843,"url":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/streaming-api-using-jquery-salesforce\/","url_meta":{"origin":65,"position":5},"title":"Streaming API Using JQuery – Salesforce","author":"Jitendra","date":"May 6, 2012","format":false,"excerpt":"Tutorial of Streaming API in Salesforce with Source code and Demo Video - Implementation of Bayeux protocol and CometD using JQuery and JSON","rel":"","context":"In "Tech Tips"","block_context":{"text":"Tech Tips","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/others\/tips\/"},"img":{"alt_text":"Salesforce Streaming API - Create Push topic","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}