{"id":1308,"date":"2012-09-29T00:20:13","date_gmt":"2012-09-29T00:20:13","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1308"},"modified":"2012-09-29T00:20:13","modified_gmt":"2012-09-29T00:20:13","slug":"jquery-on-focus-select-text-onfocus-highlight-text-of-textbox-textarea-etc","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-on-focus-select-text-onfocus-highlight-text-of-textbox-textarea-etc\/","title":{"rendered":"jQuery On Focus Select Text Examples (Highlight Text of Textbox, etc.)"},"content":{"rendered":"<p>While working with forms, it might be desirable sometimes to be able to select text\/content of a textbox\/textarea upon focus, so that you can copy it or delete in just a single step or so. The default functionality of a textbox\/textarea is that upon focus, the mouse cursor gets positioned in the textbox\/textarea and it starts blinking thus indicating that it is now ready to accept input. So in this article, we will see how we can change this default behaviour and modify it so that <em><strong>onfocus, we can highlight text of textbox, textarea, etc. using jQuery.<\/strong><\/em><\/p>\n<p><!--more--><\/p>\n<h2>Examples for Onfocus Highlight Text of Textbox, Textarea, etc. using jQuery<\/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=1308\" 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>So let&#8217;s assume that we have a textbox with ID &#8220;my_textbox&#8221; &amp; a textarea with ID &#8220;my_textarea&#8221; in a page. So here&#8217;s how you can <strong>select text on focus for the textbox and textarea using jQuery<\/strong>:<\/p>\n<h3>Example: Here is the full source code to highlight text of textbox, textarea on focus event using jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Complete source code\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery On Focus Select Text | Onfocus Highlight Text of Textbox, Textarea, etc.&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&lt;p&gt;\n&lt;label for=\"my_textbox\"&gt;Textbox:&lt;\/label&gt;\n&lt;input name=\"my_textbox\" type=\"text\" id=\"my_textbox\" value=\"This is some default value\" size=\"30\"&gt;\n&lt;\/p&gt;\n&lt;p&gt;\n&lt;label for=\"my_textarea\"&gt;Textarea:&lt;br&gt;\n&lt;\/label&gt;\n&lt;textarea name=\"my_textarea\" id=\"my_textarea\" cols=\"45\" rows=\"5\"&gt;This is some default value&lt;\/textarea&gt;\n&lt;\/p&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n$(document).ready(function() {\n\n\/\/Assign the functionality to both textbox &amp; textarea in 1 go.\n$(\"#my_textbox, #my_textarea\")\n.focus(function () { $(this).select(); } )\n.mouseup(function (e) {e.preventDefault(); });\n\n});\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&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=1308\" 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><strong>Simple, isn&#8217;t it?<\/strong><\/p>\n<p>Do you know of any other ways to use <strong>jQuery to select text for textbox\/textarea on focus<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working with forms, it might be desirable sometimes to be able to select text\/content of a textbox\/textarea upon focus, so that you can copy it or delete in just a single step or so. The default functionality of a textbox\/textarea is that upon focus, the mouse cursor gets positioned in the textbox\/textarea and it [&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":[40,42,41],"class_list":["post-1308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-l6","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1308","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=1308"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1308\/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=1308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}