Với triển khai jQuery, bạn có thể DỄ DÀNG loại bỏ các giá trị mặc định khi đến lúc nộp. Dưới đây là một ví dụ:
$('#submit').click(function(){
var text = this.attr('placeholder');
var inputvalue = this.val(); // you need to collect this anyways
if (text === inputvalue) inputvalue = "";
// $.ajax(... // do your ajax thing here
});
Tôi biết rằng bạn đang tìm kiếm một lớp phủ, nhưng bạn có thể thích sự dễ dàng của tuyến đường này (bây giờ biết những gì tôi đã viết ở trên). Nếu vậy, thì tôi đã viết nó cho các dự án của riêng tôi và nó hoạt động rất tốt (yêu cầu jQuery) và chỉ mất vài phút để thực hiện cho toàn bộ trang web của bạn. Nó cung cấp văn bản màu xám lúc đầu, màu xám nhạt khi lấy nét và màu đen khi gõ. Nó cũng cung cấp văn bản giữ chỗ bất cứ khi nào trường đầu vào trống.
Đầu tiên hãy thiết lập biểu mẫu của bạn và bao gồm các thuộc tính giữ chỗ của bạn trên các thẻ đầu vào.
<input placeholder="enter your email here">
Chỉ cần sao chép mã này và lưu nó dưới dạng placeholder.js.
(function( $ ){
$.fn.placeHolder = function() {
var input = this;
var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field
if (text) input.val(text).css({ color:'grey' });
input.focus(function(){
if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.blur(function(){
if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' });
});
input.keyup(function(){
if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.mouseup(function(){
if (input.val() === text) input.selectRange(0,0);
});
};
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) { this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
})( jQuery );
Để sử dụng chỉ trên một đầu vào
$('#myinput').placeHolder(); // just one
Đây là cách tôi khuyên bạn nên triển khai nó trên tất cả các trường đầu vào trên trang web của mình khi trình duyệt không hỗ trợ các thuộc tính giữ chỗ HTML5:
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder) {
$.getScript("../js/placeholder.js", function() {
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
}