placeholder in ie

[ligimus]

L'attributo placeholder in ie non è disponibile ma si può usare javascript per avere quella funzione. Siccome non conosco per niente il linguaggio vorrei capire come usare questo codice:

(function($) {
	$.fn.placeholder = function(options) {
		var that = this;
		if(!that.is('input[type=text]')) {
			return;
		}
		var defaults = {
			text: 'Placeholder'
		};
		options = $.extend(defaults, options);
		var top = that.offset().top;
		var left = that.offset().left;
		return that.each(function() {
			$('<span class="placeholder"/>').text(options.text).
			css({
				position: 'absolute',
				top: top,
				left: left
			}).insertAfter(that);
			that.focus(function() {
				that.next('span.placeholder').hide();
			});
			that.blur(function() {
				if(that.val() == '') {	
					that.next('span.placeholder').show();
				}
			});	
		});
	};
})(jQuery);
$(function() {
	$('#text', '#form').placeholder({text: 'Lorem'});
	$('#text2', '#form').placeholder({text: 'Lorem ipsum'});
});

adattandolo però alle classi e agli id del mio form in questa pagina:
http://ladivinacomedia.altervista.or...rmazioni1.html
sapete come fare?

[cavicchiandrea]

La pagina linkata vista con IE 8 è un "disastro" boh... difficile dare consigli prima bisognerebbe mettere a posto la pagina senza quello script per capire dov'è il difetto, sicuro che lo script sia comaptibile con tutte le versini di IE?

[Vindav]

$('input[name="nome"]', 'form').placeholder({text: 'Nome'});
$('input[name="email"]', 'form').placeholder({text: 'Email'});

[ligimus]

Originariamente inviato da cavicchiandrea
La pagina linkata vista con IE 8 è un "disastro" boh... difficile dare consigli prima bisognerebbe mettere a posto la pagina senza quello script per capire dov'è il difetto, sicuro che lo script sia comaptibile con tutte le versini di IE?

Non ho chiesto un opinione sulla pagina e non so dove lo vedi tu il disastro ogni dichiarazione è al suo posto e si, lo script funziona per tutte le versioni.

Originariamente inviato da Vindav
$('input[name="nome"]', 'form').placeholder({text: 'Nome'});
$('input[name="email"]', 'form').placeholder({text: 'Email'});

Grazie per la tua risposta precisa e concisa ma appare totalmente fuori dal form sai cosa c'è di sbagliato?

[Vindav]

(function($) {
	$.fn.placeholder = function(options) {
		var that = this;
		if(!that.is('input[type=text]')) {
			return;
		}
		var defaults = {
			text: 'Placeholder'
		};
		options = $.extend(defaults, options);
		var top = that.offset().top;
		var left = that.offset().left;
		return that.each(function() {
			$('<span class="placeholder"/>').text(options.text).
			css({
				position: 'absolute',
				top: top,
				left: left
			}).insertAfter(that);
			that.focus(function() {
				that.next('span.placeholder').hide();
			});
			that.blur(function() {
				if(that.val() == '') {	
					that.next('span.placeholder').show();
				}
			});	
		});
	};
})(jQuery);
$(function() {
	$('input[name="nome"]', 'form').placeholder({text: 'Nome'});
        $('input[name="email"]', 'form').placeholder({text: 'Email'});
});

[ligimus]

Ho appena modificato il messaggio precedente con la descrizione di quello che adesso appare

[Vindav]

è un problema di layout delle tua pagina, devi sistemare l'html... per esempio prova a levare lo stile della tabella, mi sa che è quello che rompe le scatole.

[ligimus]

Originariamente inviato da Vindav
è un problema di layout delle tua pagina, devi sistemare l'html... per esempio prova a levare lo stile della tabella, mi sa che è quello che rompe le scatole.

Ancora niente a questo punto pongo la domanda se non sia meglio che voi mi suggeriate qualcosa di meglio

[Vindav]

prova cosi:

(function($) {
	$.fn.placeholder = function(options) {
		var that = this;
		if(!that.is('input[type=text]')) {
			return;
		}
		var defaults = {
			text: 'Placeholder'
		};
		options = $.extend(defaults, options);
		var top = that.position().top;
		var left = that.position().left;
		return that.each(function() {
			$('<span class="placeholder"/>').text(options.text).
			css({
				position: 'absolute',
				top: top,
				left: left
			}).insertAfter(that);
			that.focus(function() {
				that.next('span.placeholder').hide();
			});
			that.blur(function() {
				if(that.val() == '') {	
					that.next('span.placeholder').show();
				}
			});	
		});
	};
})(jQuery);
$(function() {
	$('input[name="nome"]', 'form').placeholder({text: 'Nome'});
        $('input[name="email"]', 'form').placeholder({text: 'Email'});
});

[ligimus]

Grande ci sei riuscito ; una domanda sai per caso come sistemare in un modo migliore il testo nella cella mi spiego lo vedo troppo vicino al bordo vorrei spostarlo un pò più al centro.