Xóa và khôi phục dữ liệu mặc định trong textbox
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
