Thuộc tính placeholder trong HTML5

Sử dụng thuộc tính placeholder kết hợp với thẻ input, textarea trong HTML5 có tác dụng cung cấp thêm thông tin cho người dùng, giúp người dùng biết được họ cần nhập dữ liệu gì vào đó. Mặt định placeholder text chỉ ẩn khi người dùng nhập dữ liệu vào input hay textarea. Xin chia sẽ 1 cách ẩn đoạn placeholder text trong html5 khi người dùng focus bằng cách sử dụng jQuery

Xem Demo

HTML

<textarea placeholder='Nhập nội dung vào đây...' cols='50' rows='10'></textarea>
<br>
<input type='text' placeholder='Tìm kiếm...'>

jQuery

<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('[placeholder]').each(function() {
    var plc = $(this).attr('placeholder');
    $(this).addClass('blur').removeAttr('placeholder').val(plc).on("focus blur", function(e) {
        $(this)[(e.type == "blur" && (this.value === "" || this.value == plc)) ? "addClass" : "removeClass"]('blur');
        if (e.type == "blur" && this.value === "") $(this).val(plc);
        if (e.type == "focus" && this.value == plc) $(this).val("");
    });
});
});
//]]></script>

CSS

input.blur,
textarea.blur {color:#999} //Màu chữ placeholder

- Thuộc tính placeholder trong HTML5 chỉ có tác dụng với input type: text, search, url, tel, email, password. Và không hỗ trợ Internet Explorer 9 trở về trước