{"id":3243,"date":"2018-05-10T19:41:29","date_gmt":"2018-05-10T19:41:29","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3243"},"modified":"2018-05-10T19:45:17","modified_gmt":"2018-05-10T19:45:17","slug":"live-character-counter-javascript","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/","title":{"rendered":"Live Character Counter using JavaScript"},"content":{"rendered":"<p>The character counter counts the number of characters entered in the text field. It helps to show the notification about the number of characters written in the text box. If you want to show the entered characters count or remaining characters count in textarea, character counter is the best option for that.<\/p>\n<p><b>Live character counter<\/b> will show the character numbers when the user starts entering text in the input field or textarea. You can easily add character counter to textarea using JavaScript. In this tutorial, we will show you how to implement live character counter with JavaScript for live word count in the text field.<\/p>\n<p>The characters counter is used for many purposes in the text field. Here we will show you some most commonly used character count functionality in the text field. The example code counts characters of the text field and displays the number on the web page.<\/p>\n<h2>Live Characters Count<\/h2>\n<p>The following code counts the number of characters entered in the textarea field and shows counter to the user.<\/p>\n<p><b>JavaScript Code:<\/b><br \/>\nThe <code>countChars()<\/code> function sets the length of text to charNum element using innerHTML property.<\/p>\n<pre><span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">countChars<\/span>(obj){\r\n    <span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">getElementById<\/span>(<span style=\"color:#0b6125\">\"charNum\"<\/span>).innerHTML <span style=\"color:#794938\">=<\/span> obj.<span style=\"color:#b4371f\">value<\/span>.<span style=\"color:#b4371f\">length<\/span><span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">' characters'<\/span>;\r\n}\r\n<\/pre>\n<p><b>HTML Code:<\/b><br \/>\nThe <code>countChars()<\/code> function is called by onkeyup event that triggers when the user starts typing.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">textarea<\/span> <span style=\"color:#bf4f24\">name<\/span>=<span style=\"color:#0b6125\">\"message\"<\/span> <span style=\"color:#bf4f24\">onkeyup<\/span>=<span style=\"color:#0b6125\">\"countChars(this);\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">textarea<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">p<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"charNum\"<\/span>>0 characters&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n<\/pre>\n<h2>Live Characters Count with Max Length<\/h2>\n<p>The following code counts the number of characters and shows how many letters are entered in the maximum character.<\/p>\n<p><b>JavaScript Code:<\/b><br \/>\nThe <code>countChars()<\/code> function sets the text length to charNum element using innerHTML property. If text length is greater than max length, the color will be red.<\/p>\n<pre><span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">countChars<\/span>(obj){\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> maxLength <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">20<\/span>;\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> strLength <span style=\"color:#794938\">=<\/span> obj.<span style=\"color:#b4371f\">value<\/span>.<span style=\"color:#b4371f\">length<\/span>;\r\n    \r\n    <span style=\"color:#794938\">if<\/span>(strLength <span style=\"color:#794938\">><\/span> maxLength){\r\n        <span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">getElementById<\/span>(<span style=\"color:#0b6125\">\"charNum\"<\/span>).innerHTML <span style=\"color:#794938\">=<\/span> <span style=\"color:#0b6125\">'&lt;span style=\"color: red;\">'<\/span><span style=\"color:#794938\">+<\/span>strLength<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">' out of '<\/span><span style=\"color:#794938\">+<\/span>maxLength<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">' characters&lt;\/span>'<\/span>;\r\n    }<span style=\"color:#794938\">else<\/span>{\r\n        <span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">getElementById<\/span>(<span style=\"color:#0b6125\">\"charNum\"<\/span>).innerHTML <span style=\"color:#794938\">=<\/span> strLength<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">' out of '<\/span><span style=\"color:#794938\">+<\/span>maxLength<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">' characters'<\/span>;\r\n    }\r\n}\r\n<\/pre>\n<p><b>HTML Code:<\/b><br \/>\nThe <code>countChars()<\/code> function is called by onkeyup event that triggers when the user starts typing.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">textarea<\/span> <span style=\"color:#bf4f24\">name<\/span>=<span style=\"color:#0b6125\">\"message\"<\/span> <span style=\"color:#bf4f24\">onkeyup<\/span>=<span style=\"color:#0b6125\">\"countChars(this);\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">textarea<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">p<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"charNum\"<\/span>>0 characters&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n<\/pre>\n<h2>Remaining Characters Count<\/h2>\n<p>The following code counts the remaining characters in the textarea field and shows whether the user exceeds the limit of maximum length.<\/p>\n<p><b>JavaScript Code:<\/b><br \/>\nThe <code>countChars()<\/code> function sets the remaining text length to charNum element using innerHTML property. If the user exceeds the maximum length, the color will be red.<\/p>\n<pre><span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">countChars<\/span>(obj){\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> maxLength <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">20<\/span>;\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> strLength <span style=\"color:#794938\">=<\/span> obj.<span style=\"color:#b4371f\">value<\/span>.<span style=\"color:#b4371f\">length<\/span>;\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> charRemain <span style=\"color:#794938\">=<\/span> (maxLength <span style=\"color:#794938\">-<\/span> strLength);\r\n    \r\n    <span style=\"color:#794938\">if<\/span>(charRemain <span style=\"color:#794938\">&lt;<\/span> <span style=\"color:#811f24;font-weight:700\">0<\/span>){\r\n        <span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">getElementById<\/span>(<span style=\"color:#0b6125\">\"charNum\"<\/span>).innerHTML <span style=\"color:#794938\">=<\/span> <span style=\"color:#0b6125\">'&lt;span style=\"color: red;\">You have exceeded the limit of '<\/span><span style=\"color:#794938\">+<\/span>maxLength<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">' characters&lt;\/span>'<\/span>;\r\n    }<span style=\"color:#794938\">else<\/span>{\r\n        <span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">getElementById<\/span>(<span style=\"color:#0b6125\">\"charNum\"<\/span>).innerHTML <span style=\"color:#794938\">=<\/span> charRemain<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">' characters remaining'<\/span>;\r\n    }\r\n}\r\n<\/pre>\n<p><b>HTML Code:<\/b><br \/>\nThe <code>countChars()<\/code> function is called by onkeyup event that triggers when the user starts typing.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">textarea<\/span> <span style=\"color:#bf4f24\">name<\/span>=<span style=\"color:#0b6125\">\"message\"<\/span> <span style=\"color:#bf4f24\">onkeyup<\/span>=<span style=\"color:#0b6125\">\"countChars(this);\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">textarea<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">p<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"charNum\"<\/span>>25 characters remaining&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>Our example code helps you to implement a simple character counter with JavaScript. You can easily get the length of string and display the characters count in the text field. For example, we have used textarea, but you can use countChars() function for any text box or input field.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The character counter counts the number of characters entered in the text field. It helps to show the notification about the number of characters written in the text box. If you want to show the <\/p>\n","protected":false},"author":1,"featured_media":3245,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[316,66],"class_list":["post-3243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-counter","tag-javascript","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Live Character Counter using JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"Character counter with JavaScript - Count character of text using JavaScript. Simple code to count the number of characters in textbox or input field using JavaScript. Add live characters counter to textarea for counting the remaining characters using JavaScript innerHTML property and HTML innerHTML property.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/live-character-counter-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Live Character Counter using JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Character counter with JavaScript - Count character of text using JavaScript. Simple code to count the number of characters in textbox or input field using JavaScript. Add live characters counter to textarea for counting the remaining characters using JavaScript innerHTML property and HTML innerHTML property.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/live-character-counter-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-10T19:41:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-10T19:45:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/character-counter-remaining-characters-count-javascript-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Live Character Counter using JavaScript\",\"datePublished\":\"2018-05-10T19:41:29+00:00\",\"dateModified\":\"2018-05-10T19:45:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/\"},\"wordCount\":394,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/character-counter-remaining-characters-count-javascript-codexworld.png\",\"keywords\":[\"Counter\",\"JavaScript\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/\",\"name\":\"Live Character Counter using JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/character-counter-remaining-characters-count-javascript-codexworld.png\",\"datePublished\":\"2018-05-10T19:41:29+00:00\",\"dateModified\":\"2018-05-10T19:45:17+00:00\",\"description\":\"Character counter with JavaScript - Count character of text using JavaScript. Simple code to count the number of characters in textbox or input field using JavaScript. Add live characters counter to textarea for counting the remaining characters using JavaScript innerHTML property and HTML innerHTML property.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/character-counter-remaining-characters-count-javascript-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/character-counter-remaining-characters-count-javascript-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"character-counter-remaining-characters-count-javascript-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-character-counter-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Live Character Counter using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Live Character Counter using JavaScript - CodexWorld","description":"Character counter with JavaScript - Count character of text using JavaScript. Simple code to count the number of characters in textbox or input field using JavaScript. Add live characters counter to textarea for counting the remaining characters using JavaScript innerHTML property and HTML innerHTML property.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Live Character Counter using JavaScript - CodexWorld","og_description":"Character counter with JavaScript - Count character of text using JavaScript. Simple code to count the number of characters in textbox or input field using JavaScript. Add live characters counter to textarea for counting the remaining characters using JavaScript innerHTML property and HTML innerHTML property.","og_url":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-05-10T19:41:29+00:00","article_modified_time":"2018-05-10T19:45:17+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/character-counter-remaining-characters-count-javascript-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Live Character Counter using JavaScript","datePublished":"2018-05-10T19:41:29+00:00","dateModified":"2018-05-10T19:45:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/"},"wordCount":394,"commentCount":4,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/character-counter-remaining-characters-count-javascript-codexworld.png","keywords":["Counter","JavaScript"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/live-character-counter-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/","url":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/","name":"Live Character Counter using JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/character-counter-remaining-characters-count-javascript-codexworld.png","datePublished":"2018-05-10T19:41:29+00:00","dateModified":"2018-05-10T19:45:17+00:00","description":"Character counter with JavaScript - Count character of text using JavaScript. Simple code to count the number of characters in textbox or input field using JavaScript. Add live characters counter to textarea for counting the remaining characters using JavaScript innerHTML property and HTML innerHTML property.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/live-character-counter-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/character-counter-remaining-characters-count-javascript-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/character-counter-remaining-characters-count-javascript-codexworld.png","width":1366,"height":768,"caption":"character-counter-remaining-characters-count-javascript-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/live-character-counter-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Live Character Counter using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/character-counter-remaining-characters-count-javascript-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-Qj","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3243"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3243\/revisions"}],"predecessor-version":[{"id":3247,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3243\/revisions\/3247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3245"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}