{"id":5806,"date":"2013-02-11T13:42:39","date_gmt":"2013-02-11T13:42:39","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5806"},"modified":"2014-11-09T20:37:43","modified_gmt":"2014-11-09T20:37:43","slug":"controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/","title":{"rendered":"Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery"},"content":{"rendered":"<p>En este art\u00edculo vamos a ver como controlar el n\u00famero de car\u00e1cteres permitidos en un textarea empleando para ello jQuery.\u00a0 Es bastante utilizado en muchos sitios web. Se trata de controlar el tama\u00f1o del texto que se escribe en un textarea para evitar que los caracteres escritos sobrepasen a los permitidos.\u00a0 El control de los caracteres escritos se hace con jQuery, din\u00e1micamente en el lado del cliente, de modo que cuando el usuario llega a la longitud permitida, no se permite escribir m\u00e1s contenido en el campo textarea.<\/p>\n<p>El campo de texto que queramos controlar el n\u00famero de caracteres deber\u00e1 tener un id \u00fanico para poderlo manipular por jQuery y una limitaci\u00f3n del n\u00famero de caracteres como por ejemplo:<\/p>\n<pre>&lt;textarea rows=\"7\" cols=\"40\" id=\"comment\" maxlength=\"25\"&gt;&lt;\/textarea&gt;<\/pre>\n<p>La clave del asunto recae en el c\u00f3digo que se ejecuta en el lado del cliente, es decir, el jQuery que deberemos a\u00f1adir dentro de la etiqueta &lt;head&gt; de la p\u00e1gina:<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"..\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n\r\n\u00a0\u00a0 \u00a0var max_chars = 25;\r\n\r\n\u00a0\u00a0 \u00a0$('#max').html(max_chars);\r\n\r\n\u00a0\u00a0 \u00a0$('#comment').keyup(function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var chars = $(this).val().length;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var diff = max_chars - chars;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#contador').html(diff);\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>Estamos incluyendo la librer\u00eda jQuery y los scripts necesarios para llevar a cabo la acci\u00f3n.<\/p>\n<p>El documento o p\u00e1gina est\u00e1 esperando a que se comience a escribir dentro del campo de texto o textarea con identificador \u00fanico id=\u00bbcomment\u00bb. El n\u00famero de caracteres que se vayan escribiendo lo vamos guardando en una variable y tambi\u00e9n hacemos un c\u00e1lculo de la diferencia entre los caracteres m\u00e1ximos permitidos y la longitud de lo que se ha escrito. Tendremos un contador que se va actualizando en cada tecla pulsada mostrando en cada momento lo que queda hasta llegar al m\u00e1ximo permitido.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/textarealimit\/\" target=\"_blank\">Ver ejemplo en funcionamiento<\/a><\/p>\n<p>Esta misma funcionalidad la puedes ver realizada con simple javascript: <a href=\"https:\/\/www.jose-aguilar.com\/blog\/controlar-numero-caracteres-textarea\/\" target=\"_blank\">Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con javascript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a ver como controlar el n\u00famero de car\u00e1cteres permitidos en un textarea empleando para ello jQuery.\u00a0 Es bastante utilizado en muchos sitios web. Se trata de controlar el tama\u00f1o del texto que se escribe en un textarea para evitar que los caracteres escritos sobrepasen a los permitidos.\u00a0 El control de los [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5459,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[167,72],"class_list":["post-5806","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-eventos","tag-textarea"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a ver como controlar el n\u00famero de car\u00e1cteres permitidos en un textarea empleando para ello jQuery.\u00a0 Es bastante utilizado en muchos sitios web. Se trata de controlar el tama\u00f1o del texto que se escribe en un textarea para evitar que los caracteres escritos sobrepasen a los permitidos.\u00a0 El control de los [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-11T13:42:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-09T20:37:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/\",\"name\":\"Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"datePublished\":\"2013-02-11T13:42:39+00:00\",\"dateModified\":\"2014-11-09T20:37:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a ver como controlar el n\u00famero de car\u00e1cteres permitidos en un textarea empleando para ello jQuery.\u00a0 Es bastante utilizado en muchos sitios web. Se trata de controlar el tama\u00f1o del texto que se escribe en un textarea para evitar que los caracteres escritos sobrepasen a los permitidos.\u00a0 El control de los [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-02-11T13:42:39+00:00","article_modified_time":"2014-11-09T20:37:43+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/","name":"Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","datePublished":"2013-02-11T13:42:39+00:00","dateModified":"2014-11-09T20:37:43+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/controlar-el-numero-de-caracteres-permitidos-en-un-textarea-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Controlar el n\u00famero de car\u00e1cteres permitidos en un textarea con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=5806"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5806\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5459"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}