एक 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 की आवश्यकता है) और पूरी साइट के लिए लागू करने के लिए बस कुछ मिनट लगते हैं। यह पहली बार ग्रे टेक्स्ट देता है, फोकस में हल्का ग्रे और टाइप करते समय काला। जब भी इनपुट क्षेत्र खाली होता है तो यह प्लेसहोल्डर टेक्स्ट भी प्रदान करता है।
पहले अपना फ़ॉर्म सेट करें और इनपुट टैग पर अपने प्लेसहोल्डर विशेषताओं को शामिल करें।
<input placeholder="enter your email here">
बस इस कोड को कॉपी करें और इसे प्लेसहोल्डर के रूप में सहेजें। 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 );
सिर्फ एक इनपुट पर उपयोग करने के लिए
$('#myinput').placeHolder(); // just one
जब मैं ब्राउज़र को 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();
});
});
}