Mit einer jQuery-Implementierung können Sie die Standardwerte EINFACH entfernen, wenn es Zeit zum Senden ist. Unten ist ein Beispiel:
$('#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
});
Ich weiß, dass Sie nach einem Overlay suchen, aber vielleicht bevorzugen Sie die Leichtigkeit dieser Route (jetzt wissen Sie, was ich oben geschrieben habe). Wenn ja, dann habe ich dies für meine eigenen Projekte geschrieben und es funktioniert wirklich gut (erfordert jQuery) und die Implementierung für Ihre gesamte Site dauert nur ein paar Minuten. Es bietet zunächst grauen Text, im Fokus hellgrau und beim Tippen schwarz. Es bietet auch den Platzhaltertext, wenn das Eingabefeld leer ist.
Richten Sie zuerst Ihr Formular ein und fügen Sie Ihre Platzhalterattribute in die Eingabe-Tags ein.
<input placeholder="enter your email here">
Kopieren Sie einfach diesen Code und speichern Sie ihn als 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 );
Nur an einem Eingang verwenden
$('#myinput').placeHolder(); // just one
So empfehle ich Ihnen, es in allen Eingabefeldern Ihrer Site zu implementieren, wenn der Browser keine HTML5-Platzhalterattribute unterstützt:
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();
});
});
}