jquery, fadeIn, IE problem

4 svar · 410 visningar · startad av UrMe 25 maj 2010

UrMeMedlem sedan apr. 2001762 inlägg

Frågan25 maj 2010 13:44#1

Har ett ganska enkelt jQuery script där man kan addera fler fält i ett formulär, så här:

$(document).ready(function(){
	$('#addFields').click(addFields)
});

function addFields() {	
	var strToAdd = $('<div class="fl_form_row"><input class="fl_input fl_input_margin" type="text" name="asd1[]" value="Asd1" onfocus="clearMe(this)" /><input class="fl_input" type="text" name="Asd2[]" value="Asd2" onfocus="clearMe(this)" /></div>').hide().fadeIn(1000);
	$('#mainField').append(strToAdd);
}

function clearMe(formfield){
	if (formfield.defaultValue==formfield.value)
		formfield.value = "";
}

Detta fungerar bra i FireFox, de två input-boxarna fadear in som de ska. I internet explorer så "flashar" de till först och sedan fadeas de in. Så man hinner se dem 0.1-0.2sek när man klickar på "addera fler fält"-knappen.

Har sökt som en tok på google för en lösning men har ej hittat någon.

Har bara testat detta i IE8/FF, inte i IE7/IE6.

onfocus="clearMe(this)" fungerar inte heller i IE8 på den dynamiskt tillagda boxarna, jag har två sådana här exakt likadana boxar synliga från början. Och där fungerar onfocus-scriptet utan problem.

Någon som har några tips?

voigtann1Medlem sedan juni 20019 519 inlägg

25 maj 2010 13:58#2

Animera den först att den finns i DOM:en:

function addFields() {     
	var strToAdd = $('<div class="fl_form_row"><input class="fl_input fl_input_margin" type="text" name="asd1[]" value="Asd1" onfocus="clearMe(this)" /><input class="fl_input" type="text" name="Asd2[]" value="Asd2" onfocus="clearMe(this)" /></div>').hide();
	$('#mainField').append(strToAdd); 
	strToAdd.fadeIn(1000);
}

red.

function addFields() {     
	var strToAdd = $('<div class="fl_form_row"><input class="fl_input fl_input_margin" type="text" name="asd1[]" value="Asd1"/><input class="fl_input" type="text" name="Asd2[]" value="Asd2" /></div>').hide();
	$("input", strToAdd).focus(clearMe);
	$('#mainField').append(strToAdd); 
	strToAdd.fadeIn(1000);
}

function clearMe(){
	if (this.defaultValue==this.value)
		this.value = "";
}

$(document).ready(function(){
	$('#addFields').click(addFields)
});

Jag hatar on<> attribut i HTML koder, bind de input fält du har i din HTML (strToAdd).

defaultValue finns inte i IE (8) när jag testar, så den kommer inte fungera riktigt heller för dig.

UrMeMedlem sedan apr. 2001762 inlägg

25 maj 2010 14:09#3

Fungerar bra med animationen! Tackar!

Det märkliga är att clearMe() funktionen fungerar om jag "hårdkodar" input fälten i html-koden med onclick i IE8. Och det är ju samma funktion som läggs till i javascriptet också.

voigtann1Medlem sedan juni 20019 519 inlägg

25 maj 2010 14:14#4

dock så finns inte elementen, så jag vet inte riktigt vad IE gör men den verkar inte spara undan defaultValue på element som skapas efter att sidan har laddats in.

voigtann1Medlem sedan juni 20019 519 inlägg

25 maj 2010 14:37#5

Quick fix för dig, du kan använda dig av data objektet i jquery:

function addFields() {     
	var strToAdd = $('<div class="fl_form_row"><input class="fl_input fl_input_margin" type="text" name="asd1[]" value="Asd1"/><input class="fl_input" type="text" name="Asd2[]" value="Asd2" /></div>').hide();
	$("input", strToAdd).focus(clearMe).each(function() { $(this).data("defaultValue",this.value)});
	$('#mainField').append(strToAdd); 
	strToAdd.fadeIn(1000);
}

function clearMe(){
	if ($(this).data("defaultValue")==this.value)
		this.value = "";
}

$(document).ready(function(){
	$('#addFields').click(addFields)
});