tekst in input uitlijnen met javascript werkt niet in IE9

[JLDesign]

Met onderstaande code wil ik tekst in enkele invoervelden uitlijnen.
In chrome, FF en IE8 wordt de tekst meteen uitgelijnd bij het activeren van de functie met een button.
In IE9 echter moet je eerst de tekst opnieuw invoeren voor de functie geactiveerd wordt.
Iemand een idee of er een alternatief is die wel werkt?

[JS]
function TextCenter()
{
for (n=1;n<=5;n++){
document.getElementById("userInput" + n).style.textAlign="center"
}}
[/JS]

 

[csshunter]

Hoi JLDesign,
Zonder IE9 is het voor mij een gokje, maar heb je al geprobeerd in het script de value van het invulvakje op te vragen en er opnieuw in te zetten, nadat je de center-opdracht hebt gegeven?

Met vriendelijke groet,
CSShunter

 

[JLDesign]

Hoi csshunter,,
is dit wat je in gedachten had?
Het centreren heb ik er niet moeten in opnemen, dat zat namelijk in de stijleigenschap van de invoervelden.
Bij het wijzigen van het lettertype in de invoervelden was de tekst plots niet meer gecentreerd in IE9, vandaar dat ik probeerde met een functie de tekst opnieuw te centreren, wat niet lukte.
Ik heb nu dus uw idee meteen in de functie om het lettertype te wijzigen geïntegreerd en ja het werkt waarvoor héél erg bedankt.
Ik had het zoeken naar een oplossing reeds opgegeven en hoopte dat de bezoeker het niet zo erg zou vinden dat de tekst niet mooi gecentreerd stond.
Is het trouwens mogelijk om dit script te vereenvoudigen, met "for" lukt dit niet, ik veronderstel dat hij dan niet meer weet welke waarde waar moet ingevuld worden. ( ik ken er niet echt veel van )

[JS]
function changeFont1(val){
var l1 = document.getElementById("userInput1").value;
var l2 = document.getElementById("userInput2").value;
var l3 = document.getElementById("userInput3").value;
var l4 = document.getElementById("userInput4").value;
var l5 = document.getElementById("userInput5").value;
for (n=1;n<=5;n++){
var t = document.getElementById('userInput' + n), ts = t.style;
ts.visibility = 'hidden';
ts.fontFamily = val;
document.getElementById("userInput1").value = l1;
document.getElementById("userInput2").value = l2;
document.getElementById("userInput3").value = l3;
document.getElementById("userInput4").value = l4;
document.getElementById("userInput5").value = l5;
ts.visibility = 'visible';
}}
[/JS]

 

[Naarling]

Even aangenomen dat alle inputvelden waarbij het font aangepast moet worden class="changeFont" hebben.

function changeFont(val){
var inputs = document.getElementsByClassName("changeFont"); //stopt ieder inputveld met class="changeFont" in de array inputs
var inputsL = inputs.length;

for(i=0;i<inputsL;i++){//gaat door de inputs array heen
inputs[i].style.fontFamily = val; //verandert overal de fontFamily
inputs[i].value = inputs[i].value;// en ververst de inhoud.
}
}

Niet in IE getest (heb ik hier even niet bij de hand) maar het zou moeten werken.

 

[JLDesign]

Bedankt Naarling, werkt perfect

 

[csshunter]

Nops, alleen IE9 en de andere browsers kunnen hiermee overweg.

• IE7 en IE8 kennen geen getElementsByClassName() (zie quirksmode).

Bij een class="changeFont" kan je ze wel op een andere manier afreizen:
[JS]function changeFont(val){
var inputs=document.getElementsByTagName('input'); // verzamel alle inputs op de pagina
for (i=0;i<inputs.length;i++){ // ga ze allemaal langs
if inputs.className.indexOf('changeFont')!=-1){ // als eentje met class="changeFont"
inputs.style.fontFamily = val; // verander dan de fontFamily
inputs.value = inputs.value; // en ververs de inhoud
}
}
}[/JS]
Met x.className wordt de class-property van een element opgevraagd, dat is wel cross-browser (quirksmode).
En met de indexOff() wordt dan gecontroleerd of er het woord "changeFont" in de class zit.
Het werkt ook als er meerdere class-namen in de class mochten zitten.

Met vriendelijke groet,
CSShunter

 

[Naarling]

ugh, altijd weer IE Maar, jouw methode is inderdaad robuuster.