Mootools, các chiêu cơ bản (phần 3)

Đăng bởi Neo trong mục Hướng dẫn vào 25 tháng 10, 2008 | Comments

Đây là bài viết thứ 3 trong loạt bài viết hướng dẫn sử dụng mootools cho người mới bắt đầu. Bài hôm nay sẽ hướng dẫn các bạn làm phần đếm ngược các kí tự người dùng gõ vào trong input. Trong tất cả các bài sau này, bạn nhớ add mootools framework vào website của mình (đã hướng dẫn ở phần 1).

Đầu tiên, như thường lệ là mã HTML:

<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é Smile

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter