Contador de caracteres al estilo Twitter con jQuery

Twitter utiliza un contador de caracteres para impedir que el usuario ingrese más de los indicados por la política de la red social. Y no es la única web que cuenta con un textarea con un contador que limita el número de caracteres que el usuario introduzca. Funciona de este modo: se muestra un contador de caracteres debajo del textarea que se reduce en función de los caracteres introducidos por el usuario. Es decir, por cada carácter introducido por el usuario, se reduce en 1 el contador que se muestra debajo del textarea que recogerá el texto.

En Twitter, el cuadro para escribir tweets restringe la cantidad de caracteres a introducir. Si introducimos más texto que el permitido, el contador se pondrá en negativo y su color se tornará a rojo chillón para avisar al usuario que se está pasando. Vamos a aplicar esta característica en un ejemplo de prueba, sin necesidad de utilizar ningún plugin. Eso sí, lo que sí utilizaremos es la popular librería jQuery.

Div editable con limitación de caracteres

Este HTML contiene un div HTML editable. En el modo edición, el área de contenido está limitada por el número de caracteres que introduzca el usuario. Esta limitación de caracteres se realizará mediante jQuery, el cual detectará lo que escriba el usuario en el área de contenido.

<div id="demo-content">
    <div class="post-box-outer">
        <div contentEditable="true" id="text-content" cols="50" rows="4"
            onKeyup="count_remaining_character(this)"></div>
        <div id="character-count" align="right">50</div>
    </div>
</div>

Limitación de caracteres con jQuery

Este código muestra la función jQuery que invoca el evento 'keyup' del área de contenido editable. En este código, indico los caracteres máximos permitidos que se pueden escribir en el contenido editable. En cada pulsación de tecla, actualizo el recuento de caracteres restante. Una vez que se ha excedido el límite, entonces cambairé el color del contador tal y como lo hace la caja de tweets de Twitter.

<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
	function count_remaining_character(editable) {
		var max_length = 5;
		var character_entered = $(editable).text().length;
		var character_remaining = max_length - character_entered;

		$('#character-count').html(character_remaining);

		if (max_length < character_entered) {
			$('#character-count').css('color', '#FF0000');
			var inputText = $('#text-content').text();
			var allowedText = inputText.substring(0, max_length);
			var extraText = inputText.substring(max_length);

			if (editable.childElementCount > 0) {
				var innerText = $("#text-content div").last().text();
				if (innerText.length > 0) {
					var lastIndex = innerText.lastIndexOf(extraText);
					if (lastIndex >= 0) {
						var allowedText = innerText.substring(0, lastIndex);
						$("#text-content div").last().html(
								allowedText + "<span>" + extraText + "</span>");
					}
				}
			} else {
				$(editable)
						.html(allowedText + "<span>" + extraText + "</span>");
			}
			placeCaretAtEnd(editable);
		} else {
			$('#character-count').css('color', '#A0A0A0');
		}
	}

	function placeCaretAtEnd(el) {
		el.focus();
		var range = document.createRange();
		range.selectNodeContents(el);
		range.collapse(false);
		var sel = window.getSelection();
		sel.removeAllRanges();
		sel.addRange(range);
	}
</script>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP