{"id":1055,"date":"2018-08-17T13:44:48","date_gmt":"2018-08-17T06:44:48","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1055"},"modified":"2018-08-17T13:44:48","modified_gmt":"2018-08-17T06:44:48","slug":"character-limit-textarea-jquery","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/","title":{"rendered":"Character Limit Textarea (jQuery)"},"content":{"rendered":"<p>Artikel pada hari ini kita akan mencoba membuat sebuah form input dalam hal ini textarea, dimana pada form textarea tersebut kita batasi jumlah karakternya dan tidak boleh lebih dari jumlah yang sudah ditentukan.<br \/>\n<!--more--><br \/>\nBiasanya kita menjumpai pada kolom sebuah komentar, tentunya bertujuan agar jumlah karakter yang diinputkan lebih efisien.<\/p>\n<p>Caranya cukup mudah, teman-teman bisa mulai membuat sebuah file, kemudian untuk source codenya sebagai berikut:<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;Limit Character Textarea | Kursus Web YELLOWWWEB.ID&lt;\/title&gt;\r\n\t&lt;style type=\"text\/css\"&gt; \r\n    \t.red{ \r\n    \t\tcolor:red;\r\n    \t\tfont-weight: bold;\r\n    \t}\r\n    \ttextarea { \r\n    \t\tresize:none;\r\n    \t}\r\n\t&lt;\/style&gt;\r\n\t&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt; \r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n\r\n&lt;form action=\"\" method=\"\"&gt;                                \r\n    &lt;textarea class=\"form-control input-sm\" type=\"textarea\" id=\"message\" placeholder=\"Tulis disini\" maxlength=\"150\" rows=\"8\"&gt;&lt;\/textarea&gt;\r\n   \t\r\n   \t&lt;p id=\"characterLeft\" class=\"help-block \"&gt;Jumlah karakter melebihi sudah batas!&lt;\/p&gt;\r\n\r\n    &lt;br style=\"clear:both\"&gt;\r\n    &lt;button id=\"btnSubmit\" name=\"btnSubmit\" type=\"submit\" style=\"height:35px\"&gt; Kirim &lt;\/button&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\t$(document).ready(function(){ \r\n\t\t$('#characterLeft').text('150 characters left');\r\n\t\t\t$('#message').keydown(function () {\r\n\t\t\tvar max = 150;\r\n\t\t\tvar len = $(this).val().length;\r\n\t\t\t\tif (len &gt;= max) {\r\n    \t\t\t\t$('#characterLeft').text('Jumlah karakter melebihi sudah batas!');\r\n    \t\t\t\t$('#characterLeft').addClass('red');\r\n    \t\t\t\t$('#btnSubmit').addClass('disabled');            \r\n\t\t\t\t} else {\r\n\t\t\t\t\tvar ch = max - len;\r\n    \t\t\t\t$('#characterLeft').text(ch + ' Charater Left');\r\n    \t\t\t\t$('#btnSubmit').removeClass('disabled');\r\n    \t\t\t\t$('#characterLeft').removeClass('red');            \r\n\t\t\t\t}\r\n\t\t});    \r\n\t});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>disini perlu kita perhatikan, untuk aktivasi javascriptnya mengingat saat ini kita menggunakan <code>jQuery<\/code><\/p>\n<pre class=\"lang:default decode:true \" >&lt;script type=\"text\/javascript\"&gt;\r\n\t$(document).ready(function(){ \r\n\t\t$('#characterLeft').text('150 characters left');\r\n\t\t\t$('#message').keydown(function () {\r\n\t\t\tvar max = 150;\r\n\t\t\tvar len = $(this).val().length;\r\n\t\t\t\tif (len &gt;= max) {\r\n    \t\t\t\t$('#characterLeft').text('Jumlah karakter melebihi sudah batas!');\r\n    \t\t\t\t$('#characterLeft').addClass('red');\r\n    \t\t\t\t$('#btnSubmit').addClass('disabled');            \r\n\t\t\t\t} else {\r\n\t\t\t\t\tvar ch = max - len;\r\n    \t\t\t\t$('#characterLeft').text(ch + ' Charater Left');\r\n    \t\t\t\t$('#btnSubmit').removeClass('disabled');\r\n    \t\t\t\t$('#characterLeft').removeClass('red');            \r\n\t\t\t\t}\r\n\t\t});    \r\n\t});\r\n&lt;\/script&gt;<\/pre>\n<p>Hasilnya bisa kalian lihat seperti berikut ini:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/567rjf0s\/embedded\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Artikel pada hari ini kita akan mencoba membuat sebuah form input dalam hal ini textarea, dimana pada form textarea tersebut kita batasi jumlah karakternya dan tidak boleh lebih dari jumlah yang sudah ditentukan.<\/p>\n","protected":false},"author":1,"featured_media":1056,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[283,116],"tags":[464,466,156,18,465,463],"class_list":["post-1055","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-character-limit","tag-huruf","tag-javascript","tag-jquery","tag-karakter","tag-textarea"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Character Limit Textarea (jQuery) - YELLOWWEB.ID<\/title>\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.yellowweb.id\/blog\/character-limit-textarea-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Character Limit Textarea (jQuery) - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Artikel pada hari ini kita akan mencoba membuat sebuah form input dalam hal ini textarea, dimana pada form textarea tersebut kita batasi jumlah karakternya dan tidak boleh lebih dari jumlah yang sudah ditentukan.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-17T06:44:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/08\/limit-text.jpg?fit=600%2C290&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"290\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Character Limit Textarea (jQuery)\",\"datePublished\":\"2018-08-17T06:44:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/\"},\"wordCount\":87,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/limit-text.jpg\",\"keywords\":[\"character limit\",\"huruf\",\"javascript\",\"jquery\",\"karakter\",\"textarea\"],\"articleSection\":[\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/\",\"name\":\"Character Limit Textarea (jQuery) - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/limit-text.jpg\",\"datePublished\":\"2018-08-17T06:44:48+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/limit-text.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/limit-text.jpg\",\"width\":600,\"height\":290,\"caption\":\"limit-text\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/character-limit-textarea-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Character Limit Textarea (jQuery)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Character Limit Textarea (jQuery) - YELLOWWEB.ID","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.yellowweb.id\/blog\/character-limit-textarea-jquery\/","og_locale":"en_GB","og_type":"article","og_title":"Character Limit Textarea (jQuery) - YELLOWWEB.ID","og_description":"Artikel pada hari ini kita akan mencoba membuat sebuah form input dalam hal ini textarea, dimana pada form textarea tersebut kita batasi jumlah karakternya dan tidak boleh lebih dari jumlah yang sudah ditentukan.","og_url":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2018-08-17T06:44:48+00:00","og_image":[{"width":600,"height":290,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/08\/limit-text.jpg?fit=600%2C290&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Character Limit Textarea (jQuery)","datePublished":"2018-08-17T06:44:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/"},"wordCount":87,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/08\/limit-text.jpg","keywords":["character limit","huruf","javascript","jquery","karakter","textarea"],"articleSection":["JavaScript","jQuery"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/","url":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/","name":"Character Limit Textarea (jQuery) - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/08\/limit-text.jpg","datePublished":"2018-08-17T06:44:48+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/08\/limit-text.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/08\/limit-text.jpg","width":600,"height":290,"caption":"limit-text"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/character-limit-textarea-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Character Limit Textarea (jQuery)"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=1055"}],"version-history":[{"count":2,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1055\/revisions"}],"predecessor-version":[{"id":1058,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1055\/revisions\/1058"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1056"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}