Bir jQuery uygulaması ile, gönderme zamanı geldiğinde KOLAYCA varsayılan değerleri kaldırabilirsiniz. Aşağıda bir örnek verilmiştir:
$('#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
});
Bir yer paylaşımı aradığınızı biliyorum, ancak bu rotanın kolaylığını tercih edebilirsiniz (şimdi yukarıda ne yazdığımı biliyorsunuz). Eğer öyleyse, bunu kendi projelerim için yazdım ve gerçekten güzel çalışıyor (jQuery gerektirir) ve tüm sitenize uygulamak için sadece birkaç dakika sürer. İlk başta gri metin, odakta açık gri ve yazarken siyah sunar. Ayrıca, giriş alanı boş olduğunda yer tutucu metni de sunar.
Önce formunuzu ayarlayın ve giriş etiketlerine yer tutucu özelliklerinizi ekleyin.
<input placeholder="enter your email here">
Bu kodu kopyalayın ve placeholder.js olarak kaydedin.
(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 );
Sadece bir girişte kullanmak için
$('#myinput').placeHolder(); // just one
Tarayıcı HTML5 yer tutucu özelliklerini desteklemediğinde sitenizdeki tüm giriş alanlarına uygulamanızı şu şekilde öneririm:
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();
});
});
}