{"id":362,"date":"2017-11-02T13:31:03","date_gmt":"2017-11-02T13:31:03","guid":{"rendered":"http:\/\/www.josejavierfm.es\/blog\/?p=362"},"modified":"2017-11-02T13:31:03","modified_gmt":"2017-11-02T13:31:03","slug":"anadir-contador-de-caracteres-restantes-a-caja-de-texto","status":"publish","type":"post","link":"https:\/\/www.josejavierfm.es\/blog\/2017\/11\/02\/anadir-contador-de-caracteres-restantes-a-caja-de-texto\/","title":{"rendered":"A\u00f1adir contador de caracteres restantes a caja de texto"},"content":{"rendered":"<p>La idea es teniendo una caja de texto o un elemento input a\u00f1adir un contador de los caracteres que faltan y que se vaya actualizando a medida que escribimos.<\/p>\n<p><a href=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-364\" src=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown1-300x50.png\" alt=\"\" width=\"300\" height=\"50\" srcset=\"https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown1-300x50.png 300w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown1-604x102.png 604w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown1.png 617w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<a href=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-363\" src=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown2-300x48.png\" alt=\"\" width=\"300\" height=\"48\" srcset=\"https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown2-300x48.png 300w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2017\/11\/blog-anadir-contador-de-caracteres-restantes-a-caja-de-texto-countdown2.png 628w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>para ello utilizamos JQuery y la siguiente libreria:<\/p>\n<pre>(function($) {\r\n'use strict';\r\n\r\n$.fn.countChar = function() {\r\n\r\nreturn this.each(function(i, element) {\r\n$(element).keyup(function updateCharCounter() {\r\n\r\nvar $me = $(this);\r\nvar maxLength = parseInt($me.attr('maxlength'), 10);\r\nvar charCount = $me.val().length;\r\nvar nombrecajalimite=$me.prop('id')+\"_limit\";\r\nvar cajalimite = $('#'+nombrecajalimite);\r\n\r\ncajalimite.text('' + maxLength + '\/' + (maxLength - charCount));\r\n});\r\n\r\nvar $me = $(this),\r\nmaxLength = parseInt($me.attr('maxlength'), 10),\r\ncharCount = $me.val().length;\r\nvar nombrecajalimite=$me.prop('id')+\"_limit\";\r\nvar cajalimite = $('#'+nombrecajalimite);\r\nif (cajalimite){\r\n$me.after('<p id=\"'+nombrecajalimite+'\" class=\"limit\"><\/p>');\r\n}\r\ncajalimite = $('#'+nombrecajalimite);\r\ncajalimite.text('' + maxLength + '\/' + (maxLength - charCount));\r\n\r\n});\r\n};\r\n\r\n\r\n$( \"<style>.limit { float: right; clear: both; margin-bottom: 10px; font: 400 0.688em\/1.38 'Roboto'; text-align: right; color: #777777;}<\/style>\" ).appendTo( \"head\" )\r\n\r\n\r\n\r\n}(jQuery));\r\n<\/pre>\n<p>Con esto lo \u00fanico que tenemos que hacer es a\u00f1adir una clase a nuestra caja de texto:<\/p>\n<pre>\r\n<div class=\" clearfix\">\r\n<label class=\"_text\">Caja de texto con maxlength = 50<\/label>\r\n<input id=\"nickname\" class=\"cuentacaracteres _textfield\" size=\"32\" maxlength=\"50\" placeholder=\"counter.js\">\r\n<\/div>\r\n<\/pre>\n<p>Y a\u00f1adir al final del documento la linea que lo enlaza:<\/p>\n<pre><script>\r\n\r\n$(document).ready(function (){\r\n'use strict';\r\n\r\n\/\/ works on one field\r\n$('.cuentacaracteres').countChar();\r\n});\r\n<\/script>\r\n<\/pre>\n\n<div class=\"twitter-share\"><a href=\"https:\/\/twitter.com\/intent\/tweet?via=josejavierfm\" class=\"twitter-share-button\">Twittear<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>La idea es teniendo una caja de texto o un elemento input a\u00f1adir un contador de los caracteres que faltan y que se vaya actualizando a medida que escribimos. para ello utilizamos JQuery y la siguiente libreria: (function($) { &#8216;use strict&#8217;; $.fn.countChar = function() { return this.each(function(i, element) { $(element).keyup(function updateCharCounter() { var $me = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14,10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/362"}],"collection":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/comments?post=362"}],"version-history":[{"count":3,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"predecessor-version":[{"id":367,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/362\/revisions\/367"}],"wp:attachment":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}