একটি jQuery প্রয়োগের মাধ্যমে আপনি জমা দেওয়ার সময় অনায়াসেই ডিফল্ট মানগুলি সহজেই মুছে ফেলতে পারেন। নীচে একটি উদাহরণ দেওয়া হল:
$('#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
});
আমি জানি যে আপনি কোনও ওভারলে খুঁজছেন, তবে আপনি এই পথের স্বাচ্ছন্দ্য পছন্দ করতে পারেন (এখন আমি উপরে কি লিখেছি তা জেনে)। যদি তা হয় তবে আমি এটি আমার নিজের প্রকল্পগুলির জন্য লিখেছিলাম এবং এটি সত্যিই দুর্দান্ত কাজ করে (jQuery প্রয়োজন) এবং আপনার পুরো সাইটের জন্য প্রয়োগ করতে কয়েক মিনিট সময় নেয়। এটি প্রথমে ধূসর পাঠ্য, ফোকাসের সময় হালকা ধূসর এবং টাইপ করার সময় কালো offers এটি যখনই ইনপুট ক্ষেত্রটি খালি থাকে তখন স্থানধারক পাঠ্যও সরবরাহ করে।
প্রথমে আপনার ফর্মটি সেট আপ করুন এবং ইনপুট ট্যাগগুলিতে আপনার স্থানধারক বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করুন।
<input placeholder="enter your email here">
এই কোডটি কেবল অনুলিপি করুন এবং এটিকে স্থানধারক হিসাবে সংরক্ষণ করুন j
(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 );
মাত্র একটি ইনপুট ব্যবহার করতে
$('#myinput').placeHolder(); // just one
ব্রাউজার যখন এইচটিএমএল 5 স্থানধারক বৈশিষ্ট্যগুলি সমর্থন করে না তখন আমি আপনাকে আপনার সাইটের সমস্ত ইনপুট ক্ষেত্রে এটি প্রয়োগ করার পরামর্শ দিচ্ছি:
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();
});
});
}