Xóa và khôi phục dữ liệu mặc định trong textbox

Đăng bởi trunghieu trong mục Hướng dẫn vào 22 tháng 6, 2011 | Comments

Khi các bạn lướt web các bạn có bao giờ để ý tới 1 số trang trong ô tìm kiếm của họ sẽ để sẵn giá trị value là search và khi các bạn click vào để gõ từ tìm kiếm thì chữ search đó sẽ tự động mất đi cũng như nó sẽ tự động hiện lại khi các bạn không gõ 1 kí tự nào vào nó hay không. Hôm nay mình sẽ hướng dẫn các bạn dùng jquery để thực hiện điều đó.

Thêm thư viện jQuery

Vì sử dụng jQuery nên bạn cần thêm thư viện này vào website bằng cách thêm đoạn mã sau:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Tất nhiên bạn cũng có thể tải jQuery về máy sau đó thêm vào website

Mã html

<form id="testform">
	<input type="text" class="clear" value="Search" />
</form>

Code jquery:

$(function() {
 $('#testform input.clear').each(function(){
   //phương thức data dùng để lưu giá trị value mặc định vào biến txt
   $(this).data( "txt", $.trim($(this).val()) );
 }).focus(function(){
   // focus dùng được chạy khi người sử dụng click chuột vào textbox
   if ( $.trim($(this).val()) === $(this).data("txt") ) {
     $(this).val("");
   }	
 }).blur(function(){
   // blur được chạy khi người dùng click chuột ra ngoài textbox
   if ( $.trim($(this).val()) === "") {
     //Khôi phục lại text mặc định
     $(this).val( $(this).data("txt") );
   }
 });
});

Chúc các bạn thành công

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

trunghieu's picture

trunghieu

Sinh năm 1990 và đang là sinh viên năm 3 chuyên ngành CNTT. Hiện tại đang sống và học tập tại TpHCM. Sở thích là SEO và làm web.

Trang chủ - Twitter