Dengan implementasi jQuery, Anda dapat dengan mudah menghapus nilai default ketika saatnya untuk mengirimkan. Di bawah ini adalah contohnya:
$('#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
});
Saya tahu Anda mencari overlay, tetapi Anda mungkin lebih memilih kemudahan rute ini (sekarang tahu apa yang saya tulis di atas). Jika demikian, maka saya menulis ini untuk proyek saya sendiri dan berfungsi sangat bagus (memerlukan jQuery) dan hanya perlu beberapa menit untuk diterapkan untuk seluruh situs Anda. Ini menawarkan teks abu-abu pada awalnya, abu-abu terang saat dalam fokus, dan hitam saat mengetik. Ini juga menawarkan teks placeholder setiap kali bidang input kosong.
Pertama-tama siapkan formulir Anda dan sertakan atribut placeholder Anda pada tag input.
<input placeholder="enter your email here">
Cukup salin kode ini dan simpan sebagai 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 );
Untuk digunakan hanya pada satu input
$('#myinput').placeHolder(); // just one
Inilah yang saya sarankan Anda menerapkannya di semua bidang input di situs Anda ketika browser tidak mendukung atribut placeholder 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();
});
});
}