<label for="myInput">Viết gì đó vào đây:</label>
<input type="text" id="myInput" maxlength="20" />
Bạn còn được viết <span id="counter_number" class="counter">20</span> kí tự

Bạn hãy để ý id của input là myInput và id của kí tự là counter_number để đếm các kí tự còn lại

Tiếp theo là mã js:

<script type="text/javascript">
	window.addEvent('domready', function() {
		$('myInput').addEvent('keyup', function() {
			max_chars = 20;
			/* Lấy giá trị hiện tại của ô input */
			current_value = $('myInput').value;
			/* Đếm giá trị hiện tại */
			current_length = current_value.length;
			/* Tính toán các giá trị còn lại */
			remaining_chars = max_chars-current_length;
			$('counter_number').innerHTML = remaining_chars;
		});
	});
</script>

Về cơ bản vậy là ok rồi, bây giờ thêm một chút hay ho: Khi còn dưới 6 ký tự, thì số đếm sẽ chuyển thành màu đỏ. Bạn sửa code js như sau:

<script type="text/javascript">
	window.addEvent('domready', function() {
		$('myInput').addEvent('keyup', function() {
			max_chars = 20;
			/* Lấy giá trị hiện tại của ô input */
			current_value = $('myInput').value;
			/* Đếm giá trị hiện tại */
			current_length = current_value.length;
			/* Tính toán các giá trị còn lại */
			remaining_chars = max_chars-current_length;
			$('counter_number').innerHTML = remaining_chars;
			
			/* Đổi màu nếu còn lại ít hơn 6 kí tự */
			if(remaining_chars<=5){
			$('counter_number').setStyle('color', '#990000');
			} else {
			$('counter_number').setStyle('color', '#666666');
			}
		});
	});
</script>

Vậy là khi còn ít hơn 6 kí tự, màu sẽ chuyển thành #990000 và bình thường màu là #666666. Hãy thử xem nhé