2

I have a text area and three buttons that changes the text-align of the text to left, center and right:

<button onClick="align('left')">Left</button>
<button onClick="align('center')">Center</button>
<button onClick="align('right')">Right</button>

function align(alignment)
{
    document.getElementById("textArea").style.textAlign = alignment;
}

This works perfectly in Firefox and Chrome, but in IE9 it doesn't work. At first it looks like it just hasn't aligned it, but when I then go to type some more text, it then aligns everything correctly.

Is there anyway to make it align when you press the button?

Many thanks!

DJDMorrison
  • 1,302
  • 2
  • 17
  • 34

1 Answers1

3

Hacky but works:

function align(alignment)
{
    ta = document.getElementById("textArea");
    ta.style.textAlign = alignment;
    ta.value= ta.value;
}
Raad
  • 4,540
  • 2
  • 24
  • 41
  • No problem - I'd really like to understand why this happens, but I guess it's probably down to IE9 just being wonderful =P – Raad Feb 20 '13 at 08:55
  • 1
    In case someone else has this issue... I lost my linebreaks in my textarea when adding ta.innerHTML = ta.innerHTML; This question was my fix - http://stackoverflow.com/questions/5583040/show-newlines-in-html-textarea/5583094#5583094 - use value instead of innerHTML – jessieloo Sep 10 '13 at 19:57